Komponen UI, seperti kartu, tombol, badge, dan avatar, di Tailwind adalah resep: sekumpulan class yang selalu dipakai bareng. Bayangin resep nasi goreng. Bahannya tetap (nasi, bawang, kecap), takarannya boleh diubah (pedas atau gak). Kartu juga begitu: sudut bulat, garis tepi, jarak dalam, dan bayangan tipis. Sekali hafal resepnya, kamu tinggal mengganti takarannya.
🧪 Tebakan cepat: foto 96 × 72px diberi
rounded-full. Fotonya jadi lingkaran? Tebak dulu, jawabannya ada di bagian "Avatar: persegi dulu, baru bulat".
Kartu profil, class demi class
Ini kartu profil yang sama dengan di Lab dan di latihan:
<div id="profile-card" class="rounded-xl border p-6 shadow-sm">
<img id="avatar" class="h-16 w-16 rounded-full" src="https://picsum.photos/96/72" alt="avatar">
<h3 id="name" class="text-lg font-semibold">Budi</h3>
</div>
| Class | CSS yang dihasilkan | Artinya |
|---|---|---|
rounded-xl |
border-radius: 0.75rem; |
sudut bulat 12px |
border |
border-width: 1px; |
garis tepi 1px |
p-6 |
padding: 1.5rem; |
jarak dalam 24px |
shadow-sm |
box-shadow: 0 1px 3px ...; |
bayangan tipis di bawah kartu |
h-16 w-16 |
height: 4rem; width: 4rem; |
foto 64 × 64px |
rounded-full |
border-radius: calc(infinity * 1px); |
sudut dibulatkan habis |
text-lg |
font-size: 1.125rem; |
teks 18px |
font-semibold |
font-weight: 600; |
agak tebal |
- Empat class pertama dipasang di
#profile-card, induknya. Itu resep kartu: sudut, garis, jarak, bayangan. h-16 w-16 rounded-fulldipasang di foto. Itu resep avatar.- Tailwind menghapus gaya bawaan heading (bagian ini namanya preflight). Tanpa class,
<h3>tampil seperti teks biasa: 16px dan gak tebal. Makanya nama butuhtext-lg font-semibold.
Avatar: persegi dulu, baru bulat
rounded-full memberi radius sebesar mungkin. Browser lalu memangkasnya sampai setengah sisi terpendek. Di kotak persegi 64 × 64px, setengah sisinya 32px di semua arah, jadi hasilnya lingkaran.
Jawaban tebakannya: bukan lingkaran. Foto 96 × 72px punya sisi terpendek 72px, jadi radiusnya mentok di 36px. Ujung kiri dan kanannya setengah lingkaran, tengahnya lurus: bentuk kapsul. Makanya avatar selalu dibuat persegi dulu dengan h-16 w-16, baru dibulatkan.
Di Tailwind v4, rounded-full ditulis calc(infinity * 1px). Di v3 ditulis 9999px. Hasilnya sama.
Tombol: padding, warna, sudut, dan state
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
Simpan
</button>
px-4 py-2: jarak dalam 16px kiri-kanan dan 8px atas-bawah.bg-blue-500 text-white: tombol biru dengan teks putih.rounded-lg: sudut bulat 8px.hover:bg-blue-600: sedikit lebih gelap saat disorot.transition-colors: bikin pergantian warnanya halus, 150 milidetik. Tanpa class ini, warnanya langsung loncat ke biru 600.
Resep kartu lain yang sering dipakai: bg-white rounded-lg p-6 shadow-md. Polanya sama: background, sudut bulat, jarak dalam, bayangan.
Satu tempat untuk class-nya
Kalau kartu yang sama muncul 10 kali, jangan salin class-nya 10 kali. Kalau satu class mau diubah, kamu harus mengubahnya di 10 tempat.
- Pakai komponen. Di React, Vue, atau template seperti Blade, tulis kartunya sekali, lalu panggil berulang dengan data yang beda. Class-nya tetap di satu tempat.
@applykalau gak bisa pakai komponen, misalnya untuk HTML dari library lain yang gak bisa kamu kasih class. Di file CSS:
@import "tailwindcss";
@layer components {
.btn {
@apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;
}
}
@applymenyalin CSS dari class-class itu ke dalam.btn, jadi<button class="btn">tampil sama.- Pakai seperlunya. Kalau semua dijadikan
@apply, kamu kembali menulis CSS sendiri dan kehilangan keuntungan Tailwind.
⚠️ Jebakan yang sering ketemu
- Avatar gak persegi.
rounded-fulldi foto 96 × 72 jadi kapsul. Pasangh-16 w-16dulu. Latihannya mengecek tinggi64px, lebar64px, danborder-radius9999px. - Foto jadi gepeng. Memaksa foto 96 × 72 jadi 64 × 64 bikin gambarnya tertekan. Tambahkan
object-cover, supaya fotonya dipotong rapi, bukan ditekan. borderdi v4 ikut warna teks. Warna bawaan garis tepi di Tailwind v4 adalahcurrentColor, yaitu warna teksnya, jadibordersaja bikin garis segelap teks. (Di v3 bawaannya abu-abu muda.) Untuk garis halus, tambahkanborder-gray-200.- Nama gak tebal.
<h3>tanpafont-semiboldgak tebal di Tailwind. Latihannya mengecekfont-weight600di#name.
TL;DR: Komponen di Tailwind adalah resep class. Kartu: rounded-xl border p-6 shadow-sm (sudut 12px, garis 1px, jarak 24px, bayangan tipis). Avatar: h-16 w-16 rounded-full, persegi dulu baru bulat, karena rounded-full di foto 96 × 72 jadi kapsul. Nama: text-lg font-semibold, karena Tailwind menghapus gaya bawaan heading. Tombol: px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors, dan transition-colors bikin pergantian warnanya halus. Komponen yang muncul berulang ditulis sekali sebagai komponen. @apply cuma kalau komponen gak bisa dipakai.
