Ketika pertama kali mendengar tentang Tailwind CSS, reaksi saya sama seperti kebanyakan pengembang: "Ini terlihat jelek dan tidak terorganisir." Tapi setelah dipaksa mencobanya di satu proyek klien, saya tidak bisa kembali ke cara lama. Berikut adalah alasan mengapa Tailwind CSS telah menjadi standar workflow saya.
Tidak Ada Lagi Perang Penamaan Class
Salah satu frustrasi terbesar dengan CSS tradisional adalah menemukan nama yang "tepat" untuk setiap komponen. Apakah ini `.card`, `.post-card`, `.blog-post-card`, atau `.article-card`? Dengan Tailwind, masalah ini hilang sepenuhnya. Anda tidak perlu memikirkan nama class — Anda langsung mendeskripsikan apa yang Anda inginkan secara visual.
<!-- CSS Biasa: harus beralih ke file lain -->
<div class="card">
<h2 class="card-title">Judul</h2>
</div>
<!-- Tailwind: semua ada di sini, langsung terlihat -->
<div class="p-8 border border-foreground/10 rounded-2xl hover:-translate-y-1 transition-all">
<h2 class="text-2xl font-bold tracking-tight">Judul</h2>
</div>Desain Responsif yang Intuitif
Prefix responsif Tailwind (`sm:`, `md:`, `lg:`) membuat desain mobile-first terasa sangat natural. Saya tidak perlu melompat ke blok media query yang terpisah — cukup tambahkan prefix dan selesai. Ini membuat code jauh lebih mudah dibaca karena semua logika responsif ada di satu tempat.
Performa yang Lebih Baik
Tailwind menggunakan teknik "purging" (atau dalam v4 disebut content detection) untuk hanya menyertakan class yang benar-benar digunakan dalam build final. Ini berarti ukuran CSS di production bisa sangat kecil — sering kali di bawah 10KB untuk proyek berukuran sedang. Dibandingkan dengan bootstrap yang sering kali membawa ratusan KB CSS yang tidak terpakai.
# Ukuran CSS di production dengan Tailwind
# Sebelum purge: ~3.8MB (semua utilities)
# Setelah purge: ~8KB (hanya yang dipakai)
# Dibanding Bootstrap tanpa custom purge: ~200KB+Dark Mode Jadi Mudah
Dengan prefix `dark:`, menambahkan dark mode ke komponen apapun menjadi sangat mudah. Dikombinasikan dengan CSS variables, saya bisa membuat sistem tema yang powerful hanya dengan beberapa baris konfigurasi. Portfolio ini menggunakan pendekatan ini untuk cream/charcoal theme yang bisa beralih secara mulus.
"Tailwind bukan tentang menulis CSS lebih cepat. Ini tentang tidak pernah meninggalkan HTML Anda untuk memutuskan bagaimana tampilan sesuatu."
Kapan Tidak Menggunakan Tailwind?
Saya jujur — Tailwind tidak cocok untuk semua situasi. Untuk proyek dengan tim besar yang membutuhkan desain sistem yang sangat terstruktur, CSS Modules atau Styled Components mungkin lebih sesuai. Tailwind juga memiliki learning curve awal yang cukup signifikan. Namun untuk proyek personal dan startup, ini adalah pilihan yang hampir selalu tepat.