Tailwind CSS v4 membawa perubahan besar dari versi sebelumnya. Berikut yang perlu kamu tahu.
Perubahan Utama
- CSS-first configuration — Tidak perlu lagi tailwind.config.js, konfigurasi langsung di CSS
- Lightning CSS engine — Build 10x lebih cepat
- Native CSS nesting — Support nesting tanpa plugin
- Simplified color palette — Warna yang lebih konsisten
Cara Migrasi dari v3
npx @tailwindcss/upgrade
Tool ini akan otomatis:
- Convert tailwind.config.js ke CSS
- Update class names yang deprecated
- Migrate custom plugins
CSS-first Config
Sebelum (v3):
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: "#ff6b00",
},
},
},
};
Sesudah (v4):
@import "tailwindcss";
@theme {
--color-brand: #ff6b00;
}
Lebih clean dan tidak perlu restart dev server saat ubah konfigurasi!