Class typography di Tailwind mengatur tampilan teks: ukuran huruf, tebal tipisnya, dan rata kiri, tengah atau kanan. Bayangin toolbar di aplikasi pengolah kata: ada pilihan ukuran huruf, tombol B buat menebalkan, dan tombol rata tengah. Di Tailwind tiap tombol itu jadi satu class: text-2xl buat ukuran, font-bold buat tebal, text-center buat rata tengah.
🧪 Tebakan cepat:
text-2xldantext-centersama-sama diawalitext-. Keduanya ngatur hal yang sama? Tebak dulu, jawabannya ada di bagian "Awalan text- punya tiga tugas".
Judul dan deskripsi
Ini dua elemen dari latihan:
<h1 id="title" class="text-2xl font-bold">Judul</h1>
<p id="desc" class="text-sm text-center">Deskripsi singkat</p>
| Class | CSS yang dibuat Tailwind | Hasilnya |
|---|---|---|
text-2xl |
font-size: var(--text-2xl) dan line-height-nya |
24px, jarak baris 32px |
font-bold |
font-weight: var(--font-weight-bold) |
700 |
text-sm |
font-size: var(--text-sm) dan line-height-nya |
14px, jarak baris 20px |
text-center |
text-align: center |
rata tengah |
- Judulnya jadi 24px dan tebal. Deskripsinya 14px, dan teksnya di tengah.
- Kenapa
<h1>masih butuhfont-bold? Tailwind memasang preflight, CSS dasar yang menghapus gaya bawaan browser. Di project Tailwind,<h1>tanpa class tampil seukuran dan setebal teks biasa. Ukuran dan tebalnya kamu tentukan sendiri lewat class.
Ukuran huruf
| Class | font-size | px | line-height |
|---|---|---|---|
text-xs |
0.75rem |
12px | 16px |
text-sm |
0.875rem |
14px | 20px |
text-base |
1rem |
16px | 24px |
text-lg |
1.125rem |
18px | 28px |
text-xl |
1.25rem |
20px | 28px |
text-2xl |
1.5rem |
24px | 32px |
text-3xl |
1.875rem |
30px | 36px |
text-4xl |
2.25rem |
36px | 40px |
text-base adalah ukuran dasar: 1rem = 16px. Skalanya lanjut sampai text-9xl. Tiap class ukuran juga memasang line-height (jarak antar baris) yang pas buat ukuran itu.
Tebal huruf
| Class | font-weight |
|---|---|
font-thin |
100 |
font-light |
300 |
font-normal |
400 |
font-medium |
500 |
font-semibold |
600 |
font-bold |
700 |
font-extrabold |
800 |
font-black |
900 |
font-bold = font-weight: 700, tebal yang biasa dipakai judul. Angka tengah seperti 500 dan 600 cuma kelihatan beda kalau font-nya punya ketebalan itu. Kalau gak punya, browser memakai ketebalan terdekat yang ada.
Rata teks
text-left, text-center, text-right dan text-justify membuat text-align dengan nilai yang sama: text-center = text-align: center. Rata berlaku buat teks di dalam elemen blok seperti <p>, <h1> atau <div>.
Awalan text- punya tiga tugas
Tailwind membedakan class text- dari kata di belakangnya:
- ukuran:
text-sm,text-base,text-2xlmembuatfont-size - rata:
text-left,text-center,text-rightmembuattext-align - warna:
text-blue-600,text-whitemembuatcolor
Jadi text-2xl dan text-center ngatur dua hal yang beda, dan aman dipasang bareng: class="text-2xl text-center text-blue-600". Itu jawaban tebakannya. Tebal huruf beda sendiri: awalannya font-, karena propertinya font-weight.
💡 Jarak baris, jarak huruf, dan gaya lain
| Class | CSS | Contoh pakai |
|---|---|---|
leading-tight |
line-height: 1.25 |
judul besar yang rapat |
leading-relaxed |
line-height: 1.625 |
paragraf panjang biar lega |
tracking-tight |
letter-spacing: -0.025em |
judul besar |
tracking-wide |
letter-spacing: 0.025em |
label kecil |
uppercase |
text-transform: uppercase |
label huruf kapital |
underline |
text-decoration-line: underline |
tautan |
italic |
font-style: italic |
kutipan |
Ukuran dan jarak baris bisa ditulis sekaligus pakai garis miring: text-sm/6 = 14px dengan line-height 24px (6 langkah × 4px). Buat artikel panjang, ada plugin resmi @tailwindcss/typography dengan class prose, dibahas di materi plugin nanti.
⚠️ Jebakan yang sering ketemu
<h1>polos dikira otomatis besar. Preflight menghapus ukuran dan tebal bawaan heading. Tulistext-2xl font-boldsendiri.text-bold. Gak ada class itu. Tebal pakaifont-bold, karena propertinyafont-weight.text-centerdi<span>.<span>itu elemen inline yang cuma selebar teksnya, jadi gak ada ruang buat menggeser ke tengah. Pasang di elemen bloknya, misalnya<p id="desc">.text-2xldikira dua kali ukuran. Itu nama tingkat, bukan rumus:text-2xl= 24px,text-3xl= 30px.
TL;DR: Ukuran huruf pakai text-xs sampai text-9xl: text-base = 16px (1rem), text-sm = 14px, text-2xl = 24px, dan tiap class ukuran ikut memasang line-height. Tebal pakai font-*: font-normal 400, font-semibold 600, font-bold 700. Rata pakai text-left, text-center, text-right, dan cuma kelihatan di elemen blok. Awalan text- dipakai untuk ukuran, rata dan warna, Tailwind membedakannya dari kata di belakangnya. Preflight membuat <h1> polos seukuran teks biasa, jadi judul selalu butuh class ukuran dan font-bold. Jarak baris pakai leading-*, jarak huruf pakai tracking-*.
