Pindah ke Tailwind v4: Nggak Ada Lagi tailwind.config.js

Tailwind v4 ngubah total cara konfigurasi — nggak ada lagi tailwind.config.js, semuanya didefinisiin langsung di CSS pakai directive @theme. Situs ini pakai pendekatan itu dari awal, tapi saya sempet ragu pas pertama baca changelog-nya, karena kedengeran kayak breaking change yang bakal ribet buat proyek yang udah jalan.

src/styles/global.css punya satu blok @theme yang define --color-primary: #137fec, --color-primary-dark, --color-background-light/dark, --color-surface-light/dark, dan --font-sans buat font stack Inter. Semua token ini otomatis kebentuk jadi utility class Tailwind — bg-primary, text-primary-dark, dan seterusnya — tanpa satupun baris JavaScript. Nggak ada theme.extend.colors lagi, nggak ada file config terpisah yang harus disinkronin sama CSS.

Yang bikin ini lebih enak buat saya: dulu di v3, kalau mau nambah warna baru, saya harus buka file JS terpisah, edit object theme.extend.colors, terus kadang harus restart dev server biar perubahannya kepake — dan itu langkah yang gampang kelupaan pas lagi fokus di CSS. Sekarang saya edit langsung di file yang sama tempat saya nulis style lain, dan Vite hot-reload perubahannya seketika tanpa restart apapun. Kedengeran kecil, tapi jumlah context-switch yang ilang itu lumayan kerasa pas lagi iterasi cepat soal warna dan spacing.

Detail lain yang saya suka: dark mode di situs ini nggak pakai strategi dark: class bawaan Tailwind yang defaultnya ngikutin prefers-color-scheme mentah, tapi custom variant — @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *)); — yang ngikutin attribute data-theme di elemen <html>. Jadi toggle tema manual tiga-arah yang saya bikin (system/light/dark, ada di post lain) tetap kompatibel sama utility class Tailwind biasa kayak dark:bg-surface-dark, tanpa perlu workaround aneh-aneh kayak duplikasi class atau JavaScript tambahan buat override style.

Migrasinya sendiri nggak sepenuhnya mulus. Ada satu plugin lama yang saya pakai di v3 buat animasi custom yang belum kompatibel sama sistem @theme yang baru, jadi saya harus nulis ulang beberapa keyframe langsung di CSS biasa daripada lewat plugin config — kerjaan ekstra sekitar satu-dua jam yang nggak saya duga pas mutusin upgrade. Kalau proyeknya lebih gede dari situs personal ini, dengan lebih banyak plugin custom, saya bakal saranin baca changelog migrasi resminya baik-baik dulu sebelum langsung npm install tailwindcss@latest.

CSS-first config ini kedengeran kayak perubahan kecil di atas kertas, tapi buat proyek satu orang kayak ini, satu file konfigurasi lebih sedikit berarti satu tempat lebih sedikit buat lupa di-update pas ganti sesuatu — dan itu jenis pengurangan friction yang efeknya baru kerasa berbulan-bulan kemudian, bukan pas hari pertama migrasi.