Tailwind CSS v4: Apa yang Baru dan Cara Migrasi

Tailwind CSS v4 membawa perubahan besar dari versi sebelumnya. Berikut yang perlu kamu tahu.

Perubahan Utama

1. CSS-first configuration — Tidak perlu lagi tailwind.config.js, konfigurasi langsung di CSS
2. Lightning CSS engine — Build 10x lebih cepat
3. Native CSS nesting — Support nesting tanpa plugin
4. 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!