Utility-First CSS: Kumpulan "Batu Bata" Ajaib
Jika kamu pernah menggunakan framework seperti Bootstrap, kamu pasti terbiasa dengan class "siap pakai"
seperti .btn-primary atau .card. Itu disebut pendekatan
Component-Based (Berbasis Komponen/Mobil yang sudah dirakit).
Tailwind menggunakan pendekatan Utility-First. Alih-alih memberimu mobil siap pakai yang
sulit diubah jika kamu tidak suka warnanya, Tailwind memberimu baut, ban, mesin, dan cat warna (batu bata).
Kamu adalah mekaniknya!
🧱 Membedah Anatomi Utility Class
Setiap class di Tailwind disebut "Utility Class" karena ia biasanya berfokus hanya pada SATU jenis
pengaturan CSS saja. Mari kita bedah class text-blue-500.
text - blue - 500
1. Prefix (Sifat)
text-
Menggambarkan properti CSS apa yang mau diubah.
Contoh lain: bg- (background), border-
2. Kategori
blue-
Menentukan palet atau kelompok nilai apa yang diambil.
Contoh lain: red, gray
3. Skala (Shade)
500
Menentukan intensitas. 500 adalah nilai tengah normal.
100 (Sangat pudar) s/d 900 (Sangat pekat)
Setara dengan CSS murni: color: #3b82f6;
🧩 Merakit Lego Menjadi Mahakarya
Karena setiap class hanya melakukan satu hal kecil, kita harus menggabungkan banyak class dalam satu tag HTML untuk membuat sebuah bentuk visual. Ini mungkin terlihat panjang, tapi rasanya sangat memuaskan seperti menyusun lego balok demi balok secara instan.
// Menggambar Tombol Notifikasi dari Nol
<button class="p-4 bg-white rounded-xl shadow-lg flex items-center gap-4 hover:bg-indigo-50 filter transition">
<div class="bg-indigo-100 p-3 rounded-full text-indigo-500">
💬
</div>
<div>
<h4 class="font-bold text-gray-800">Pesan Baru</h4>
<p class="text-sm text-gray-500">Budi mengirim pesan...</p>
</div>
</button>
⚠️ Bukannya ini sama saja dengan Inline CSS?
Mungkin kamu berpikir, "Lho, ini bukannya sama jeleknya dengan mengotori atribut <div style="color: blue; padding: 10px;">?
Kenapa harus capek-capek pakai Tailwind?"
❌ Inline Style (Buruk)
- • TIDAK BISA menggunakan Media Queries untuk menyesuaikan HP/Layar (Gagal Responsif!).
-
•
TIDAK BISA menggunakan Pseudo-class seperti fitur
:hoveratau:focus. -
•
Terlalu bebas berantakan! Satu programmer mengetik margin
12px, yang lain15px, yang lain10.5px. Desain tidak konsisten.
✅ Tailwind Utility (Ajaib)
-
✓
BISA Responsif! Tinggal tambahkan label awalan layar:
md:bg-blue-500. -
✓
BISA Animasi & Hover! Tinggal tambahkan awalan:
hover:-translate-y-1. -
✓
Angkanya terkunci! Jarak margin Tailwind sudah dibakukan oleh desainer pro agar tetap simetris
(
m-2,m-4,m-6). Tidak ada angka aneh.