Pernah ngerjain CSS lalu mikir berjam-jam mau kasih nama class apa? header-button-primary-large-blue? Atau scroll ribuan baris CSS cari mana yang ngubah padding nih? Tailwind CSS balik flow itu: lo gak nulis CSS sama sekali. Lo kombinasi class utility kecil-kecil langsung di HTML — p-4 bg-white rounded-lg shadow = padding + background + rounded + shadow, semua gabungan satu line. Hasilnya: gak ada lagi naming hell, gak ada CSS file yang membengkak, dan styling jadi visible langsung di markup.
💡 Adam Wathan bikin Tailwind tahun 2017 karena frustrasi sama BEM, OOCSS, semua naming convention yang ribet. Awalnya dibully komunitas ("class soup!", "ini CSS inline disamarkan!"). Sekarang dipake Netflix, GitHub, OpenAI, Vercel — top 5 framework CSS dunia. Pendekatan kontrarian yang menang.
CSS Tradisional vs Tailwind
<!-- CSS tradisional -->
<div class="card">Konten</div>
<style>
.card { padding: 16px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
</style>
<!-- Tailwind CSS -->
<div class="p-4 bg-white rounded-lg shadow">Konten</div>
Keuntungan Tailwind
- Tidak perlu berpikir nama class
- Tidak ada CSS yang tidak terpakai (auto-purge unused class)
- Konsisten karena menggunakan design system bawaan
- Responsive dan dark mode sangat mudah
Sistem Spacing (Kelipatan 4px)
Tailwind pakai sistem konsisten: p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px. Berlaku untuk margin (m-*), padding (p-*), gap, width, height, dll.
🎭 Analogi sehari-hari
CSS tradisional = bikin lukisan from scratch — campur cat, beli kanvas, kasih nama setiap karya. Tailwind = LEGO blocks — udah jadi semua, tinggal kombinasi. Mau bikin rumah? Tumpuk block yang sesuai. Mau bikin pesawat? Block sama, susunan beda. Konsisten + cepet + gak pusing naming.
⚠️ Jebakan yang sering ditemui
- Class soup ngeri pas first impression — keliatan ribet, tapi dengan IntelliSense + readability membaik dengan praktik
@applyeverywhere = balik ke CSS tradisional, defeat purpose. Pakai@applyjarang- Lupa setup purge/JIT = production CSS bundle besar (semua class included)
- Magic number
[27px]= pakai sparingly, prefer skala default biar konsisten - Tailwind v3 vs v4 — JIT default di v3+, syntax sedikit beda dari v2
TL;DR: Tailwind CSS = utility-first framework. Tulis class langsung di HTML (p-4 bg-white rounded), bukan CSS custom. Sistem spacing kelipatan 4px. Pros: gak pusing naming, no unused CSS, konsisten. Cons: HTML keliatan ribet awalnya. Dipake Netflix, GitHub, OpenAI, Vercel — standar industri 2025.
