Fitur menarik di TailwindCSS v3.4

Baru baru ini TailwindCSS terdapat pembaruan baru.

Menambahkan fitur-fitur yang sudah ada di Vanilla CSS 🍦 (CSS Murni) namun belum di aplikasikan di TailwindCSS, dan beberapa fitur khusus dari TailwindCSS itu sendiri.

Secara singkat saya akan membahas fitur yang saya sukai saja dari pembaruan ini, akan terasa sangat panjang jika saya membahas semuanya 😅.

Dynamic viewport units

Sekarang kita mempunyai masa depan yang baru dengan menggunakan dvh, lvh, dan svh.

Saya menyukai fitur tersebut dikarenakan akan sangat membantu untuk mobile screen/responsive 📱. Saya biasanya menggunakan min-h-screen atau h-full.

Namun untuk sekarang banyak pilihan dan variatif, semakin mudah dalam merancang responsive yang lebih baik.

Penggunaan dan contoh utility nya:

<div class="h-dvh">
  <!-- ... -->
</div>

Size utility

Saya terkadang merasa jengkel jika menulis w-5 dan h-5 secara bersamaan di satu class.

Saya pernah berpikir 🤔 kenapa tailwind tidak memberikan opsi utility yang lain jika value width dan height nya sama?

Dengan pembaruan ini hal yang saya keluhkan ternyata terwujud 🚀. Mereka menambahkan utility baru yaitu size. Ini adalah gabungan dari utility w dan h.

Contoh:

<div class="size-40">Dewa</div>

Sama saja dengan:

<div class="w-40 h-40">Dewa</div>

Style children

Salah satu yang paling saya sukai dari pembaruan di v3.4. Ini sangat berguna karena menghemat ✨ penggunaan utility dan tentunya mengurangi jumlah code agar lebih bersih.

Semisal saya mempunyai komponen kategori seperti ini:

<h2>Kategori:</h2>
<ul>
  <li class="border border-sky-300 bg-sky-50 px-2 py-0.5">Indomie Goreng</li>
  <li class="border border-sky-300 bg-sky-50 px-2 py-0.5">Indomie Rendang</li>
  <li class="border border-sky-300 bg-sky-50 px-2 py-0.5">Indomie Soto</li>
</ul>

Untuk sekarang kita hanya perlu melakukannya seperti ini:

<h2>Kategori:</h2>
<ul class="*:border *:border-sky-300 *:bg-sky-50 *:px-2 *:py-0.5">
  <li>Indomie Goreng</li>
  <li>Indomie Rendang</li>
  <li>Indomie Soto</li>
</ul>