Estetika Fisik: Latar, Garis & Bayangan
Sebuah kotak kosong (Div) tidak akan terlihat oleh mata pengguna tanpa adanya pewarnaan fisik. Di Tailwind, kamu bisa menyulap sebuah kotak menjadi sebuah Card modern nan elegan hanya dengan menggabungkan 3 kekuatan: Background (Warna latar), Border (Garis Tepi & Lengkungan), dan Shadow (Bayangan 3 Dimensi).
🎨 1. Background (Latar Belakang)
Semua warna latar belakang di Tailwind dimulai dengan prefix (awalan) bg-. Selain warna solid, Tailwind
juga memiliki utilitas luar biasa untuk membuat warna gradasi (Gradients).
bg-blue-500
Warna Biru Solid
bg-purple-500/30
Warna Ungu + Transparan 30%
bg-gradient-to-r from-cyan-400 to-blue-500
Gradasi (Kanan: Cyan ke Biru)
🛡️ 2. Border & Radius (Tepi & Kelengkungan)
Ada 3 properti penting tentang Border. Pertama, ketebalan garis (border). Kedua,
warna garis (border-blue-500). Dan ketiga yang paling sering disukai desain
modern: Kelengkungan ujung kotak (rounded).
Hukum Garis
- Ketebalan: border, border-2, border-4, border-8 Makin besar angka, makin tebal garis tepinya.
-
Sisi Spesifik: border-t (Top), border-b (Bottom)
Kamu bisa menaruh garis merah di bagian KIRI saja:
border-l-4 border-red-500 - Tingkat Tumpul: rounded-sm, rounded-lg, rounded-full Anggota paling populer. `rounded-full` akan menyulap kotak persegi menjadi lingkaran bulat 100% (Sempurna untuk foto profil Avatar).
⛅ 3. Box Shadow (Bayangan Tiga Dimensi)
Desain Flat sudah agak ketinggalan zaman. Menambahkan sedikit bayangan akan mengangkat elemenmu dari
latar belakang seolah-olah dia melayang. Di Tailwind, ini sangat mudah: panggil saja keluarga shadow.
Kontrol Bayangan
📋 Resep Rahasia Kartu Keren (Card)
Jika kamu ingin membuat "Kotak Card" klasik seperti di sosial media modern, inilah racikan resep Utility Class-nya:
bg-white: Jangan lupa beri warna cat putih! Kalau tidak ia transparan membaur dengan latar body.border: Garis tipis 1px super halus (border abu-abu tipis bawaan) mempertegas batas.rounded-xl: Melengkungkan setiap sudut agar tidak tajam menusuk mata (Modern Vibes).shadow-md: Membuatnya melayang dari layar dengan bayangan sedang.p-6: Memberikan jarak bernapas (Padding) selebar 24px agar teks tidak menempel ke garis pinggir.