Tailwind CSS sudah jadi standar de facto untuk styling di banyak proyek modern. Versi 4 membawa perombakan besar di balik layar: engine baru yang ditulis ulang, konfigurasi berbasis CSS, dan kecepatan build yang melonjak. Buat kamu yang sehari-hari memakai Tailwind, ini perubahan yang perlu dipahami.

Engine Baru, Build Lebih Cepat

Perubahan paling terasa adalah performa. Engine baru memproses CSS jauh lebih cepat — full build dan incremental build keduanya melonjak. Untuk proyek besar dengan ribuan kelas, ini menghemat banyak waktu development.

Konfigurasi Pindah ke CSS

Di v3, kamu mengatur tema lewat tailwind.config.js. Di v4, pendekatan utamanya bergeser ke CSS langsung memakai @theme. Ini membuat konfigurasi lebih dekat ke tempat ia dipakai.

/* Konfigurasi tema di CSS (v4) */
@import "tailwindcss";

@theme {
    --color-brand: #1440A0;
    --color-accent: #F5C800;
    --font-display: "Inter", sans-serif;
}

Token yang kamu definisikan langsung tersedia sebagai utility, misalnya bg-brand atau text-accent.

CSS Modern sebagai Fondasi

v4 memanfaatkan fitur CSS modern seperti cascade layers, custom properties, dan color-mix(). Hasilnya output lebih ramping dan kamu dapat fitur yang dulu butuh plugin. Konsekuensinya, v4 menargetkan browser modern — jadi cek dukungan browser kalau audiensmu masih banyak memakai versi lama.

Tips Migrasi dari v3

  • Pakai tool migrasi resmi. Tailwind menyediakan upgrade tool yang menangani sebagian besar perubahan otomatis.
  • Cek plugin pihak ketiga. Tidak semua plugin v3 langsung kompatibel. Verifikasi satu per satu.
  • Uji visual menyeluruh. Beberapa nilai default berubah; bandingkan tampilan sebelum dan sesudah.
  • Migrasi bertahap. Untuk proyek besar, jangan upgrade semua sekaligus tanpa rencana rollback.

Perlu Buru-buru Upgrade?

Kalau proyekmu berjalan baik di v3, tidak ada urgensi pindah. Tapi untuk proyek baru, mulai langsung dari v4 masuk akal — kamu dapat performa dan arah pengembangan terbaru. Untuk proyek lama yang aktif, rencanakan migrasi saat ada jeda fitur, bukan di tengah deadline.

Kesimpulan

Tailwind v4 adalah langkah maju yang signifikan: lebih cepat, lebih modern, dan lebih sederhana dalam konfigurasi. Pahami perubahan konfigurasi berbasis CSS dan target browser-nya, lalu nikmati workflow styling yang lebih ringan.