Ketika tailwind mengumumkan perilisan versi 4 nya, tidak jarang orang-orang berfikir “apa yang terjadi dengan versi lama? akankah ditinggal begitu saja?”, disamping itu memikirkan tentang kerumitan yang terjadi ketika melakukan migrasi, bahkan cara mempraktikan apa yang ada pada dokumentasi migrasinya.
Tentu penulis memiliki project yang sudah lama dibuat, bahkan ketika itu versi prefix berada di ujungnya versi 3 (yang mana cukup lama dan tidak ada update di versi major ini), dan ya… semua dependensi sudah pasti bergantung padanya, paling sering yang berkaitan dengan UI. Tidak menyangka bahwa versi 4 akan beneran dirilis.
Bicara tentang migrasi, ternyata tidak rumit, jika dilakukan pelan-pelan dan memahami konteks nya. Penulis akan ambil contoh ketika ada library UI yang masih menunjukan cara lama dalam menerapkan tailwind ala kamu, menggunakan tailwind.config.js.
Anggap saja kalian menjumpa dokumentasi seperti ini (shadcn):
https://www.shadcn-vue.com/docs/components/accordion.html
Sementara itu, lihat informasi mengenai konsep CSS-first configuration pada artikel berikut:
https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration
Dapat kamu lihat, bahwa salah satu perubahan terbesar pada update ini adalah cara kamu menerapkan konfigurasi tailwind yang awalnya dalam bentuk file javascript menjadi CSS, sangat ringkas dan familiar. Tentu kamu masih bisa melakukan apapun selama masih berkaitan dengan property yang yang menaningi isi opsi-opsi.
Perhatikan, jika menjumpai nama object parent yang seperti ini, misal theme.
Maka untuk mengkonversinya ke CSS. Kita perhatikan keyword nama properti didalam object extend, tidak asing dengan keyframes dan animation bukan?, kedua penamaan ini eksis di CSS, maka dari itu cukup pindahkan ke dalam blok directive variable @theme pada css seperti berikut.
Memang ada bagusnya, selain konsisten, penerapan CSS-First configuration ini juga lebih ter-arah karena untuk menerapkan perubahan, kita cukup menggunakan sintaks CSS yang sudah familiar bagi kita semua.
Penulis ingat betapa menyebalkannya ketika cara tersebut seharusnya bisa dilakukan di CSS malah menerapkan gaya object javascript.
Contoh lainnya, ketika di v3 memiliki plugin yang dipanggil melalui file js akan tetap dipindahkan ke file css pada tailwind v4 ini. Kamu bisa jumpai bagaimana bentuknya pada dokumentasi milik DaisyUI:
https://v5.daisyui.com/docs/v5-beta/
Kesimpulannya? semua sudah dikonversi ke CSS dari yang awalnya berbentuk object notation pada file javascript, penerapan prinsip ini tidak lain adalah untuk menghindari kebingungan antara konfigurasi di JavaScript dan CSS, serta membuat pengembangan menjadi lebih konsisten dan mudah dipahami.
Semoga membantu, traktir saya ya jika ingin bacaan bermanfaat lainnya seperti ini.