TailwindCSS v4 Beta Resmi Dirilis: Apa yang Baru?

TailwindCSS v4 beta hadir dengan hasil build super cepat, dukungan Vite, konfigurasi berbasis CSS, support fitur css terbaru seperti container queries dan pesan error yang lebih jelas.

Tailwindcss v4

Pada Jumat pekan ketiga November 2024, bang Adam Wathan selaku creator TailwindCSS, resmi mengumumkan versi beta pertama dari TailwindCSS v4. Ini adalah kesempatan para frontend web developer untuk mencicipi fitur-fitur terbaru TailwindCSS v4 sebelum versi stabil dirilis.

Bang Adam mengungkapkan bahwa pengembangan TailwindCSS v4 memakan waktu lebih dari delapan bulan, dan menghabiskan ratusan jam untuk perbaikan bug dan peningkatan performa.

Selengkapnya bisa baca dari laman resmi https://tailwindcss.com/blog/tailwindcss-v4-beta

Saya sendiri telah mencobanya, ternyata memang benar seperti klaim bang Adam Wathan, performa kecepatan proses build TailwindCSS v4 bisa 5x lebih cepat dengan versi TailwindCSS v3x sebelumnya.

Paket Instalasi TailwindCSS v4

Untuk mencoba TailwindCSS v4 versi beta ini, saya menggunakan CLI sebagai dependency dengan perintah berikut:

$ npm install tailwindcss@next @tailwindcss/cli@next

Setelah proses instalasi selesai, file info package.json yang dihasilkan terlihat seperti ini:

{  
  "name": "my-site",
  "version": "1.0.0",
  "description": "My Site build with TailwindCSS v4",
  "main": "index.js",
  "scripts": {
    "dev": "npx @tailwindcss/cli -i ./app.css -o ./css/style.css --minify --watch"  
  },
  "keywords": ["tailwindcss-v4", "theme"],
  "author": "Fauzan My",
  "license": "MIT",
  "dependencies": {
    "@tailwindcss/cli": "^4.0.0-beta.9",
    "tailwindcss": "^4.0.0-beta.9"
  }  
}

Dari file konfigurasi package.json, terlihat jelas bahwa TailwindCSS 4 hanya butuh dua modul saja @tailwindcss/cli dan modul tailwindcss yang lebih ringkas tapi sangat powerfull, sebelumnya ada ketergantungan pada modul autoprefixer dan modul-modul tambahan lainnya.

Fitur Baru di TailwindCSS v4 Beta

1. Dukungan Langsung untuk Vite

Sebelumnya, instalasi hanya mendukung CLI dan PostCSS. Kini, TailwindCSS v4 menambahkan dukungan bawaan untuk Vite, membuat setup proyek lebih fleksibel.

2. Mesin Build Lebih Cepat

Proses build kini lima kali lebih cepat dibandingkan versi sebelumnya. Peningkatan performa secara drastis berkat menulis ulang mesin TailwindCSS. Terima kasih kepada team kontributor TailwindCSS.

3. Konfigurasi Berbasis CSS

Konfigurasi kini dapat dilakukan langsung dalam file CSS, menggantikan file konfigurasi JavaScript tradisional. Ini menyederhanakan pengelolaan.

4. Dukungan Native untuk @import CSS

Sebelumnya, plugin postcss-import diperlukan untuk menggunakan @import. Di TailwindCSS 4, fitur ini tersedia secara bawaan:

/* File : app.css */

@import "tailwindcss";
@import "./tailwindcss/components.css";

Dengan fitur ini, tidak perlu lagi menambahkan modul dependensi tambahan di package.json.

5. Dukungan untuk Fitur CSS Modern

  • Container Queries → memungkinkan layout yang lebih fleksibel berdasarkan ukuran container, bukan viewport.
  • Unit Viewport Baru → seperti svh, lvh, dan dvh yang menyesuaikan dengan visibilitas toolbar.
  • CSS Layer → untuk pengelompokan aturan.
  • Dll → Lihat domukentasi resmi TailwindCSS /docs/v4-beta

6. Deteksi Sumber Otomatis

Path source tidak perlu lagi ditentukan secara manual di tailwind.config.js. TailwindCSS 4 akan mendeteksinya secara otomatis. Sudah sangat pintar.

7. Format Warna P3 dan OKLCH

TailwindCSS 4 meningkatkan dukungan warna dari sRGB ke OKLCH, menghasilkan warna yang lebih hidup di tempat-tempat yang sebelumnya dibatasi oleh ruang warna sRGB.

8. Efisiensi Nama Kelas

Kelas seperti hover hanya diaktifkan pada layar desktop, meningkatkan performa. Beberapa kelas juga lebih eksplisit:

  • shadow di versi 3 menjadi shadow-sm.
  • rounded menjadi rounded-sm.

9. Fitur Variants yang Dapat Dikomposisi

Fitur @variant salah satu peningkatan untuk mendefinisikan kustom variasi langsung di file CSS tanpa harus menambah atau memodifikasi file konfigurasi seperti tailwind.config.js.

Contoh, jika ingin membuat hover yang tetap berlaku di semua perangkat, termasuk perangkat sentuh, cukup tambahkan konfigurasi variasinya:

/* File : app.css */

@variant hover (&:hover);

Kode ini akan menimpa varian hover bawaan Tailwind CSS versi 4, yang sebelumnya dibatasi oleh @media (hover: hover). Dengan mendefinisikan ulang seperti di atas, gaya hover akan diterapkan tanpa memeriksa apakah perangkat mendukung hover atau tidak.

10. Penanganan Error Lebih Cerdas

TailwindCSS 4 memberikan pesan error yang lebih jelas, contoh:

/* Komponen Kustom */
@layer components {
  .my-custom-card {
    @apply p-4 border bg-blue-200 teks-2xl;
  }
}

Pesan error:

Error: Cannot apply unknown utility class: teks-2xl

Pesan seperti ini sangat memudahkan debugging.

Demikian 10 fitur baru TailwindCSS versi 4 yang menarik menurut penulis. Untuk fitur-fitur keren lainnya, silahkan buka laman resmi TailwindCSS.

Kesimpulan

TailwindCSS 4 hadir dengan peningkatan performa yang signifikan, dengan proses build yang hingga 5x lebih cepat dibandingkan versi sebelumnya. Tapi jangan salah, kecepatan proses build ini tidak berhubungan langsung dengan performa loading website jika menggunakan framework CSS Tailwind 4 untuk menata tampilan theme website. Faktor utama yang mempengaruhi kecepatan loading adalah ukuran file style.css hasil build.

Salah satu keunggulan Tailwind CSS 4 adalah fleksibilitas konfigurasinya. Kita dapat dengan mudah mengganti fitur bawaan, seperti CSS reset preflight, dengan opsi yang lebih ringan. Hal ini akan mengurangi ukuran file CSS dan meningkatkan performa website.

Saat artikel ini ditulis, TailwindCSS v4 masih versi beta belum tahu kapan bang Adam Wathan rilis versi stabil.

Pertanyaannya, apakah menunggu rilis stabil, baru siap pakai untuk projek yang sesungguhnya? Meskipun masih dalam versi beta, tidak apa untuk mencobanya ke projek sesungguhnya. Perubahan utamanya ada di sistem backend TailwindCSS, sementara nama kelas tetap konsisten dengan versi sebelumnya.

Memang sih ada beberapa bug yang muncul saat mencicipi TailwindCSS 4 versi beta, tapi itu bukan masalah besar.

Nah, bagi yang menunggu rilis stabil TailwindCSS v4 untuk digunakan pada next projek, saya rasa Anda belum paham betul dengan TailwindCSS. Untuk itu, silahkan baca dulu artikel “Apa itu TailwindCSS?”.

Facebook Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *