🎨 Tailwind CSS vs Vanilla CSS: Kapan Harus Menggunakan Keduanya?
Perdebatan antara pendukung Tailwind CSS dan penganut Vanilla CSS (atau CSS murni) seakan tidak pernah usai. Keduanya memiliki filosofi yang bertolak belakang, namun sama-sama powerful jika digunakan di waktu yang tepat.
Pendekatan Vanilla CSS (dan CSS Modules)
Vanilla CSS memisahkan separation of concerns dengan tegas. HTML hanya untuk struktur, CSS hanya untuk gaya. Kamu membuat class semantic seperti .btn-primary atau .card-container, lalu menulis gayanya di file CSS terpisah.
Kapan digunakan?
- Saat membuat project kecil yang tidak butuh build step rumit.
- Ketika kamu memiliki design system yang sangat custom dan animasi CSS yang kompleks.
- Jika kamu ingin markup HTML-mu tetap bersih dan mudah dibaca.
Pendekatan Tailwind CSS (Utility-First)
Tailwind CSS membuang jauh-jauh pemisahan tersebut. Kamu menulis class utility (seperti flex p-4 bg-blue-500 rounded-lg) langsung di dalam HTML/JSX. Markup-mu mungkin terlihat berantakan, tapi kamu tidak perlu lagi pusing memikirkan nama class atau berpindah-pindah file.
Kapan digunakan?
- Saat bekerja dalam tim besar (mencegah bentrok nama class dan CSS yang terus membengkak).
- Membangun aplikasi dengan komponen framework seperti React atau Vue, di mana komponen sudah merangkum markup dan style menjadi satu kesatuan yang reusable.
- Prototyping cepat. Kamu bisa membangun UI kompleks tanpa meninggalkan file HTML/JSX.
Kesimpulan
Tidak ada yang salah atau benar. Namun di era component-based architecture (React, Next.js, Svelte), Tailwind CSS memberikan kecepatan dan konsistensi yang sulit ditandingi. Meski begitu, fundamental Vanilla CSS (seperti pemahaman tentang Flexbox, Grid, dan Specificity) tetap wajib dikuasai sebelum beralih ke Tailwind.