Panduan Tailwind CSS v4: Apa yang Berubah?

Tailwind CSS v4 adalah rilis besar yang mengubah cara kita mengkonfigurasi dan menggunakan framework ini. Setelah mencoba di beberapa project, berikut ringkasan perubahan terpenting.

Konfigurasi Berbasis CSS

Di v4, konfigurasi tidak lagi menggunakan tailwind.config.js. Sebagai gantinya, semua konfigurasi dilakukan langsung di file CSS menggunakan @theme:

@import "tailwindcss";

@theme {
  --color-brand: oklch(60% 0.2 240);
  --font-display: "Inter", sans-serif;
}

Ini terasa lebih natural dan mengurangi context switching antara JS dan CSS.

CSS Variables Otomatis

Setiap nilai di @theme otomatis tersedia sebagai CSS custom property. Ini sangat berguna untuk theming dinamis atau integrasi dengan library lain.

Performa Build

Build time di v4 jauh lebih cepat berkat engine baru yang ditulis ulang dalam Rust (melalui Lightning CSS). Pada project medium-sized, saya melihat penurunan waktu build dari ~2 detik menjadi ~400ms.

Tips Migrasi

Gunakan codemod resmi yang disediakan tim Tailwind: npx @tailwindcss/upgrade. Hampir semua perubahan bisa dimigrasi otomatis.