Kabar gembira! Tailwind v3.0 akhirnya resmi dirilis nih, yay! 🤩🎉
Buat kalian yang belum tahu, Tailwind adalah CSS framework populer buat mempercantik tampilan website. Tapi beda dari framework kebanyakan, Tailwind ini membebaskan kita buat menata desain tanpa harus menulis baris-baris CSS manual. Kok bisa? Nah, soal itu kita bahas di lain kesempatan ya biar nggak kepanjangan.
Kemarin, tepatnya tanggal 9 Desember 2021 (kalian bisa intip repository-nya di sini), Tailwind meluncurkan versi ketiganya. Rilis kali ini membawa perbaikan performa yang signifikan, peningkatan alur kerja (workflow), dan pastinya segudang fitur baru. Kira-kira apa saja yang menarik buat dicoba? Yuk, mari kita bahas bareng-bareng! 😄
Poin Penting
- Fitur JIT (Just-in-Time) sekarang jadi mode default, bikin proses build jauh lebih kencang tanpa perlu PurgeCSS.
- Arbitrary values memungkinkan penulisan nilai kustom langsung di class HTML menggunakan kurung siku.
- Palet warna baru yang lebih kaya lengkap dengan fitur opacity modifier yang intuitif menggunakan tanda garis miring.
Fitur Baru dan Peningkatan Keren di Tailwind v3.0
Sebagai rilis paling dinanti sejauh ini, tim pengembang Tailwind menghadirkan banyak fitur apik yang nggak cuma mendongkrak produktivitas, tapi juga bikin developer experience (DX) makin mantap.
Tailwind CSS v3.0 has got to be our most exciting release ever...
Beberapa fitur baru yang paling menonjol antara lain:
- Mode Just-in-Time (JIT) sebagai bawaan — yang sebelumnya masih dalam tahap uji coba (preview).
- Palet warna baru — termasuk tambahan warna untuk box shadow dan text decoration.
- Arbitrary values — cara asyik buat menulis gaya inline dengan tetap pakai utility class.
- Print modifiers — untuk mempermudah pengaturan tampilan saat halaman dicetak.
- Aspect ratio — dukungan native untuk rasio aspek tanpa trik padding tambahan.
- Play CDN — mencoba Tailwind JIT langsung di browser secara instan.
- Dan masih banyak lagi tambahan utility classes lainnya!
Nah, berhubung fiturnya melimpah banget, kali ini kita bakal fokus membahas tiga fitur utama yang menurut saya paling keren dan berdampak besar. Buat daftar lengkapnya, kalian bisa langsung meluncur ke situs resmi Tailwind CSS. Sekalian juga bisa baca-baca dokumentasinya yang ramah dan bersahabat banget buat dipelajari!
Bikin Website Makin Berwarna
Tailwind v3.0 hadir membawa banyak palet warna baru yang segar. Selama ini, pilihan warna bawaan Tailwind memang nggak pernah mengecewakan. Kerennya lagi, tim Tailwind mengklaim kalau semua skema warna ini dipilih secara manual (hand-crafted), nggak asal dibuat pakai script generator otomatis. Kalian bahkan bisa melihat pembuktiannya langsung di berkas JavaScript konfigurasi warna di repo GitHub mereka.
Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.
Mulai dari variasi warna abu-abu, merah, oranye, ungu, sampai hitam-putih semua tersedia lengkap. Pilihan warna ini disusun rapi dengan tingkatan kontras yang presisi dari terang ke gelap.
📷 Ilustrasi: bagan palet warna bawaan Tailwind CSS dengan gradasi tingkat kecerahan dari skala 50 hingga 900.
Masih kurang puas dengan warna bawaan? Ingin pakai warna custom sendiri? Tenang, kalian tinggal mendaftarkannya saja di file konfigurasi tailwind.config.js.
Di versi terbaru ini, Tailwind juga menambahkan dukungan warna khusus untuk box shadow, text decoration, dan caret color (warna garis kursor berkedip di text box).
Nggak berhenti di situ, ada juga fitur keren bernama opacity modifier. Fitur ini berfungsi buat mengubah tingkat transparansi (opacity) warna yang kita pasang. Caranya gampang dan intuitif banget, cukup tambahkan tanda garis miring / diikuti nilai persentase opacity yang kalian mau.
<p class="bg-red/50 text-black">
Teks hitam dengan latar belakang merah transparan 50%
</p>Arbitrary Values: Inline Style dengan Gaya
Kalau dulu kita harus repot membuka dan mengubah file konfigurasi buat menambahkan ukuran atau warna custom, sekarang nggak perlu pusing lagi. Tailwind v3 memperkenalkan anotasi khusus untuk memasukkan nilai kustom langsung pada utility class yang sudah ada. Caranya gampang, cukup pakai tanda kurung siku [...] di belakang nama utility-nya.
Misalnya, kalau kalian mau bikin teks dengan ukuran font 77px dan warna biru #0366D6, kalian tinggal menuliskan kode class HTML seperti ini:
<p class="text-[77px] text-[#0366D6]">
Teks ini berwarna #0366D6 dengan ukuran 77px
</p>Praktis banget kan? Nggak perlu lagi bolak-balik buka file konfigurasi cuma buat satu-dua elemen unik! 🤩
Ingin bikin styling yang lebih kompleks kayak box-shadow kustom? Bisa juga dong:
<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
<!-- Sama seperti properti CSS box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3) -->
</div>Bahkan lewat trik kurung siku ini, kita bisa menuliskan custom properties CSS yang belum didukung bawaan Tailwind. Jadi rasanya mirip menulis inline style, tapi dengan format yang rapi dan terintegrasi.
Kalian bisa pelajari trik selengkapnya di panduan resmi Tailwind CSS docs.
Selamat Datang JIT, Selamat Tinggal PurgeCSS!
Nah, ini dia fitur juara yang menurut saya paling revolusioner di rilis kali ini. Meskipun mode JIT (Just-in-Time) sudah sempat diperkenalkan di Tailwind v2.1, statusnya waktu itu masih sebatas uji coba (preview). Walaupun tetap bisa dipakai normal tanpa kendala berarti, rasanya tetap beda dengan fitur yang sudah stabil.
Dulu, kalau kalian memakai Tailwind v2.2 dengan mengaktifkan mode JIT, terminal bakal memunculkan pesan peringatan (warning) bahwa fitur tersebut masih dalam tahap preview dan belum direkomendasikan untuk tahap produksi.
📷 Ilustrasi: pesan peringatan di terminal tentang status eksperimental mode JIT pada Tailwind CSS versi 2.2.
Sekarang mode JIT diklaim sudah benar-benar matang dan resmi dijadikan sebagai mode bawaan (default) di Tailwind v3.0. Jadi, kita bisa mengucapkan selamat tinggal pada PurgeCSS! 🤟
Sedikit kilas balik, sebelum ada JIT, Tailwind memakai metode tree-shaking dengan bantuan PurgeCSS. Di awal pengembangan, kita bakal dibekali file CSS raksasa berisi seluruh utility classes yang ukurannya bisa mencapai sekitar 3MB! Pas masuk proses produksi (production build), barulah sistem memindai file HTML untuk menyaring dan menghapus utility classes yang nggak terpakai biar ukuran file menyusut.
Dengan JIT, cara kerjanya dibalik 180 derajat. Tailwind memulai dari file CSS kosong. Setiap kali kalian menambahkan sebuah utility class di file HTML atau komponen, mesin JIT bakal langsung membuatkan style yang sesuai secara instan.
Keuntungan terbesar dari mode JIT ini tentu saja performa. Proses kompilasi kode jadi jauh lebih cepat dibanding PurgeCSS tradisional. Saya sempat membandingkannya langsung di proyek yang sama, dan selisihnya bisa hemat sampai 15 detik! Kebetulan proyek tersebut memakai Nuxt dan PostCSS 8.
Selain itu, ukuran file CSS pas tahap pengembangan (development) bakal sama rampingnya dengan versi produksi. Jadi nggak ada lagi cerita terminal lemot gara-gara harus memproses file CSS berukuran besar saat koding berjalan.
Bicara soal varian (variants), di Tailwind terbaru ini kita nggak usah ribet mendaftarkan varian seperti active, focus, atau hover di berkas tailwind.config.js lagi, karena semuanya otomatis digenerate berkat kehebatan JIT. Fitur arbitrary values yang kita bahas tadi juga bisa berjalan berkat kontribusi mode JIT ini.
Lanjut Pakai Tailwind?
Itulah beberapa fitur unggulan yang dibawa oleh Tailwind v3.0. Bagaimana? Tertarik buat langsung mencobanya di proyek kalian? Atau sudah siap-siap buat migrasi ke versi baru ini?
Kalian bisa langsung mampir ke halaman instalasi Tailwind untuk mulai mencoba, atau tengok repository GitHub Tailwind CSS untuk melihat detail perkembangannya.
Selamat berkoding ria 👋