Tailwind v3.0 Rilis! JIT, Arbitrary dan Banyak Lagi
Kabar gembira, Tailwind v3.0 akhirnya rilis yay 🤩🎉
Untuk yang belum tahu, Tailwind adalah CSS framework untuk mempercantik website. Tapi tidak seperti framework yang lain, Tailwind ini memungkinkan kita untuk menulis CSS tanpa harus menulis CSS. Wah gimana tuh? Kita bahas pada kesempatan lain biar tidak jadi panjang.
Nah kemarin, tepatnya 9 Desember 2021 (lihat repo) Tailwind merilis versi ke tiganya yang menghadirkan perbaikan performa, peningkatan alur kerja, dan segudang fitur baru pastinya. Kira-kira apa saja yang baru? Mari kita bahas…
Tailwind v3.0 Daftar Fitur dan Peningkatan Baru
Sebagai rilis paling exciting sejauh ini, pengembang tailwind menghadirkan banyak fitur keren dan apik yang pastinya tidak hanya meningkatkan produktivitas tetapi juga developer experience.
Tailwind CSS v3.0 has got to be our most exciting release ever...
Beberapa diantara fitur barunya adalah:
- Just-in-Time mode secara default — sebelumnya masih preview
- Palet warna baru — tambahan juga untuk box shadow dan text decoration
- Arbitrary value — inline style dengan gaya
- Print modifier — yak, print modifier
- Aspect ratio — native tanpa padding
- Play CDN — dengan support JIT tentunya
- Dan masih banyak lagi tambahan utility class yang lain
Nah saking banyaknya fitur baru, kali ini kita akan membahas 3 fitur saja yang menurut saya paling keren. Untuk daftar fitur lengkapnya bisa langsung dilihat di website tailwind. Sekalian juga bisa baca-baca dokumentasinya yang sangat wah sekali — jujur, dokumentasi paling friendly yang pernah saya lihat.
Buat Website Semakin Berwarna
Tailwind v3.0 hadir dengan banyak palet warna baru. Selama ini palet warna tailwind memang tidak pernah mengecewakan — setidaknya untuk saya. Tidak heran, tailwind mengklaim jika semua skema warna dipilih secara manual, tidak ada campur tangan otomatisasi kode program sama sekali. Bahkan bisa dilihat langsung di reponya
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 hitam-putih, abu-abu, merah, oranye, ungu semua ada.
Masih kurang? Mau tambah warna custom? Bisa… Tinggal otak-atik file konfigurasinya.
Pada versi kali ini, Tailwind juga menghadirkan warna untuk box shadow, text decoration, dan caret (outline di sekitar text box)
Tidak sampai disitu, ada juga fitur opacity modifier. Sesuai namanya, fitur ini berfungsi untuk mengubah opacity dari warna yang ditetapkan. Penerapannya juga cukup intuitif, cukup dengan menggunakan tanda '/' diikuti dengan nilai opacity yang diinginkan.
<p class="bg-red/50 text-black">
text hitam dengan background merah 50%
</p>
Arbitrary Value, Inline Style dengan Gaya
Jika sebelumnya kita harus mengubah file konfigurasi untuk membuat gaya baru, kali ini tidak perlu lagi. Tailwind 3 memperkenalkan anotasi class untuk menambahkan nilai kustom pada style yang sudah ada. Cukup dengan menggunakan kurung siku, kita sudah bisa melakukan modifikasi gaya.
Misal kita mau membuat paragraf dengan ukuran 77px dan warna #0366D6 maka penulisan classnya cukup seperti ini:
<p class="text-[77px] text-[#0366D6]">
Teks ini berwarna #0366D6 dengan ukuran 77px
</p>
Simpel sekali, dan yang terpenting tidak perlu repot mengubah konfigurasi 🤩.
Mau styling yang ribet-ribet? Bisa juga, contohnya styling box-shadow:
<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
<!-- sama seperti box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3) -->
</div>
Lebih dari itu, bahkan dengan kekuatan kurung siku ini kita bisa membuat definisi style yang belum ada pada Tailwind. Yaa… kurang lebih mirip lah dengan inline style.
Selengkapnya silahkan baca di laman tailwind.
Halo Just-in-Time, Selamat Tinggal PurgeCSS
Yess.. ini dia fitur yang menurut saya paling mengesankan pada rilis kali ini. Walaupun JIT atau Just-in-Time mode ini sudah diperkenalkan sejak Tailwind v2.1, tapi saat itu fitur ini masih dalam proses preview. Walaupun bisa digunakan dengan normal — sejauh ini saya belum pernah mengalami masalah — tapi yang namanya preview tetaplah preview.
Bahkan kalau kalian coba menggunakan tailwind v2.2 dengan mengaktifkan JIT, kemungkinan besar akan keluar pesan warning seperti ini
Sekarang JIT diklaim sudah matang dan pada Tailwind v3.0 ini menjadi mode defaultnya. Katakan selamat tinggal pada PurgeCSS 🤟.
Sekedar informasi saja, sebelum hadirnya JIT ini, Tailwind menggunakan metode treeshaking dengan PurgeCSS. Jadi pada awalnya ada file CSS yang berisi semua utility class — iya semua sekitar 3MB untuk file CSS! Baru ketika proses produksi akan dilakukan scanning pada class di file HTML atau apapun itu untuk menghapus utility class yang tidak terpakai pada file CSS.
Nah, dengan JIT ini tailwind memulai semuanya dari nol. Ketika ada utility class yang ditambahkan pada file HTML, baru file CSS akan dibuat sesuai kebutuhan. Mungkin video ini sudah cukup menjelaskan.
Tailwind JIT
Keuntungan dari mode JIT ini yang paling utama ada pada performanya, jelas lebih cepat daripada menggunakan PurgeCSS — saya coba bandingkan pada proyek yang sama selisih 15 detik! Keduanya menggunakan Nuxt dan PostCSS8.
Selanjutnya adalah ukuran file CSS ketika development yang kurang lebih mirip dengan ketika production. Ini karena tailwind hanya menambahkan class seperlunya saja, jadi tidak ada ukuran 3MB hanya untuk file CSS seperti versi sebelumnya.
Berbicara tentang variants. Dengan Tailwind yang baru ini kita tidak perlu lagi repot menambahkan variant ke tailwind.config.js karena semuanya otomatis dibuat dengan… lagi-lagi fitur JIT. Karena ini juga fitur arbitrary value ada.
Lanjut Tailwind?
Jadi itu dia, fitur-fitur keren yang hadir di Tailwind v3.0. Gimana? Tertarik untuk coba? Atau mungkin udah mau migrasi? Langsung aja cek dokumentasinya, atau mampir ke repo githubnya untuk info lebih lengkap.
Selamat ber-koding ria 👋