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
, dandvh
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 menjadishadow-sm
.rounded
menjadirounded-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?”.