Tiga Pilar Visual: Teks, Ruang & Ukuran
Setelah menginstal Tailwind, mari kita pelajari kelas-kelas fondasi yang paling sering kamu ketik sehari-hari. Sebuah desain yang bagus berawal dari tiga hal dasar: Huruf yang bisa dibaca (Typography), Jarak pernapasan (Spacing), dan Bentuk blok fisik (Sizing).
🔤 1. Typography (Mengatur Teks)
Dalam CSS tradisional, kita mengatur ukuran dengan font-size dan ketebalan dengan
font-weight. Di Tailwind, kamu hanya memanggil label kaos (xs, sm, md, lg, xl, 2xl) untuk ukuran,
atau nama sifat (bold, light) untuk ketebalan.
A. Ukuran (Text Size)
B. Ketebalan (Font Weight)
C. Perataan (Align)
text-leftRata Kiritext-centerRata Tengahtext-rightRata Kanantext-justifyRata Kiri Kanan
D. Warna Text
text-red-500 Merah Bahayatext-blue-600 Biru Korporattext-gray-400 Abu Redup (Catatan)
📏 2. Spacing (Margin & Padding)
Sistem jarak di Tailwind menggunakan skema proporsional berbasis angka. Mengingat ilmu Box Model kita, p- berarti Padding (Bantalan ruang dalam) dan m-
berarti Margin (Daya dorong ke luar).
Arah (Axis)
- p- = Seluruh arah (Atas,Bawah,Kiri,Kanan)
- px- = X-Axis (Kiri & Kanan saja)
- py- = Y-Axis (Atas & Bawah saja)
- pt- = Top (Atas)
- pb- = Bottom (Bawah)
- pl- / pr- = Left / Right
Nilai Angka Khusus
Satu satuan angka di Tailwind sama dengan 0.25rem (atau 4px di browser normal).
Contoh Pembentukan Bantalan
📐 3. Sizing (Width & Height)
Untuk mengatur lebar fisik elemen, kita pakai w- (Width), dan untuk Tinggi pakai h- (Height). Nilai angkanya sama persis
dengan sistem Margin/Padding di atas (Berbasis kelipatan 4px). Tapi, Tailwind punya nilai Fraction (Pecahan
perbandingan) yang sangat super untuk membuat layout persentase!
Pecahan Lebar (Fractions)
📋 Kunci Menghafal Sistem Tailwind
p- untuk Padding, m- untuk Margin, w- untuk Width, h- untuk Height.
px-4 atau mt-10).