Tailwind CSS 4.0: Semua yang Berubah dan Cara Migrasi

Tailwind CSS 4.0 adalah rewrite terbesar dalam sejarah framework ini. Berikut yang perlu Anda ketahui.

Perubahan Terbesar

Engine Baru (Lightning CSS)

Tailwind 4 menggunakan Rust-based engine yang 10x lebih cepat dari versi sebelumnya.

Konfigurasi via CSS, Bukan JavaScript

Tailwind 4 menggunakan CSS custom properties:

@import "tailwindcss";
@theme {   --font-sans: "Inter", sans-serif;   --color-primary-500: oklch(0.6 0.2 260);   --spacing-18: 4.5rem; }

Tidak Perlu tailwind.config.js

Konfigurasi konten dan theme langsung di CSS file.

CSS-First Configuration

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-semibold;
  }
}

Cara Migrasi dari v3

npm install tailwindcss@next @tailwindcss/vite

Perubahan breaking:

• bg-opacity- → bg-black/50

• text-opacity- → text-black/50

• Kelas deprecated dihapus

Gunakan codemod resmi:

npx @tailwindcss/upgrade