Baru-baru ini saya mencoba Tailwind CSS untuk pertama kalinya. Tailwind adalah framework CSS dengan pendekatan utility-first — kita dapat membangun tampilan menggunakan kelas-kelas kecil yang bisa digabung sesuai kebutuhan.
Apa sih maksudnya?
Tailwind CSS sebenarnya lebih sederhana dibanding framework CSS lainnya. Kebanyakan framework menyediakan komponen siap pakai seperti buttons atau cards. Itu memang cepat dan praktis, tapi akan muncul masalah ketika kita ingin membuat desain yang berbeda dari template bawaan.
Contohnya komponen card.
Di Bootstrap, membuat card itu mudah sekali. Referensinya juga jelas:
Card Bootstrap
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Nah, di Tailwind tidak ada komponen bernama card.
Tetapi kita bisa membangun card sendiri dengan cepat menggunakan utility classes.
Contohnya dari Tailwind v1:
Card Tailwind
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
Mau ubah ukuran? Tinggal ganti max-w-sm jadi max-w-lg.
Mau ubah warna, padding, radius? Tinggal pakai utility yang sudah disediakan.
Fleksibel banget.
Pertama kali pakai Tailwind
Awalnya memang terasa ribet untuk yang belum terbiasa dengan CLI seperti terminal atau command prompt di Windows. Mulai dari install npm, setting config, sampai menjalankan build. Tapi tenang, dokumentasi resmi Tailwind sangat lengkap, dan banyak juga tutorial berbahasa Indonesia di YouTube.
Yang bikin tambah nyaman, Tailwind punya Intellisense extension di VS Code.
Jadi kalau belum hafal nama-nama class, tinggal install saja — nanti auto-complete akan muncul sendiri waktu ngoding. Tidak perlu bolak-balik buka dokumen di browser.
Setelah beberapa hari pakai Tailwind, biasanya muncul momen:
“Yaelah, kenapa nggak dari kemarin bikin UI pakai ini?”
Ringkas, fleksibel, dan cepat.
Masih ragu buat mulai?y x g gass 🚀