Tailwind CSS v4 — Apa yang Berubah?

Tailwind CSS v4 adalah rilis mayor yang mengubah cukup banyak cara kita mengkonfigurasi dan menggunakan framework ini. Setelah lama pakai v3, inilah hal-hal utama yang perlu kamu tahu.

Engine Baru: Oxide

Tailwind v4 menggunakan engine baru bernama Oxide yang ditulis dengan Rust. Hasilnya? Build time jauh lebih cepat — hingga 10x dibanding v3 pada project besar.

Config Pindah ke CSS

Ini perubahan paling signifikan. Tidak ada lagi tailwind.config.js. Semua konfigurasi dilakukan langsung di file CSS:

@import "tailwindcss";
 
@theme {
  --color-primary: oklch(0.42 0.12 270);
  --font-display: "Fraunces", Georgia, serif;
  --radius-lg: 0.75rem;
}

Warna dengan OKLCH

Tailwind v4 mendorong penggunaan format warna OKLCH yang lebih perceptually uniform dibanding HEX atau HSL. Hasilnya, gradien dan transisi warna terlihat lebih konsisten di berbagai layar.

/* Sebelumnya (HSL) */
--color-blue-500: hsl(217, 91%, 60%);
 
/* Sekarang (OKLCH) */
--color-blue-500: oklch(0.6 0.2 231);

Variabel CSS-first

Custom properties sekarang menjadi fondasi sistem desain. Setiap token di @theme otomatis tersedia sebagai CSS variable dan sebagai Tailwind utility class.

Migrasi dari v3

Tailwind menyediakan codemod untuk migrasi otomatis:

npx @tailwindcss/upgrade

Meski begitu, pastikan tetap review manual untuk kasus-kasus edge yang tidak tertangkap codemod.

Secara keseluruhan, v4 adalah langkah maju yang signifikan. Sedikit learning curve di awal, tapi hasil akhirnya lebih bersih dan performant.