Sistem Styling Tipografi

Kenapa ini penting

Sebagian besar isi website adalah teks. Pengunjung datang untuk membaca: judul produk, deskripsi, artikel, harga. Kalau tipografinya berantakan (ukuran tidak konsisten, jarak baris terlalu rapat, kontras warna rendah), situs terasa murahan dan melelahkan dibaca, walaupun gambarnya bagus.

Tailwind menyediakan sistem tipografi yang sudah dipikirkan matang: skala ukuran font, ketebalan, tinggi baris, jarak huruf, dan warna. Kamu juga bisa menambah font kustom lewat @theme, dan untuk konten panjang seperti artikel blog ada plugin resmi @tailwindcss/typography (versi terverifikasi: 0.5.20) yang menata semua elemen HTML hanya dengan satu class prose.

Konsep inti

Ukuran font (`text-*`)

Skala default: text-xs (0.75rem), text-sm (0.875rem), text-base (1rem), text-lg, text-xl, text-2xl, sampai text-9xl. Setiap ukuran sudah membawa line-height bawaan yang pas. Di v4 kamu bisa mengatur ukuran dan tinggi baris sekaligus dengan garis miring: text-lg/7 artinya font text-lg dengan line-height calc(var(--spacing) * 7). Atau text-base/loose.

Ketebalan (`font-*`)

font-thin (100), font-light (300), font-normal (400), font-medium (500), font-semibold (600), font-bold (700), font-extrabold (800), font-black (900). Pastikan font yang kamu muat memang punya ketebalan itu; kalau tidak, browser akan "memalsukan" tebalnya dan hasilnya jelek.

Tinggi baris (`leading-`) dan jarak huruf (`tracking-`)

leading-none (1), leading-tight (1.25), leading-snug, leading-normal (1.5), leading-relaxed, leading-loose (2). Angka juga bisa: leading-6 = 1.5rem.
tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest.

Aturan praktis: judul besar enak dengan leading-tight dan tracking-tight, sedangkan paragraf panjang butuh leading-relaxed agar mata tidak lelah. Teks kecil huruf kapital (label) bagus dengan tracking-wide.

Warna dan dekorasi teks

text-gray-700, text-indigo-600, text-white, dengan opacity text-black/60. Dekorasi: underline, decoration-wavy, decoration-indigo-500, underline-offset-4, line-through. Transformasi: uppercase, lowercase, capitalize. Lainnya: italic, text-center, truncate (potong dengan "..."), line-clamp-3 (batasi 3 baris), text-balance (judul terbagi rata antar baris), text-pretty (hindari satu kata yatim di baris terakhir).

Font kustom lewat `@theme`

Di v4, font didaftarkan sebagai variabel tema dengan namespace --font-*. Variabel --font-display otomatis menghasilkan class font-display. Untuk mengganti font bawaan seluruh situs, timpa --font-sans, karena preflight memakai --font-sans untuk html.

Font dari Google Fonts dimuat lewat <link> di HTML atau @import url(...) di CSS (letakkan sebelum @import "tailwindcss").

Plugin typography

Teks dari CMS atau Markdown biasanya berupa HTML mentah (<h2>, <p>, <ul>) tanpa class. Preflight Tailwind menghapus semua gaya bawaan, jadi teks itu tampil polos. Plugin typography menyelesaikannya: bungkus dengan class="prose" dan semua elemen di dalamnya langsung tertata. Di v4, plugin dimuat dengan directive @plugin di CSS.

Analogi: kalau utility biasa itu seperti mengecat dinding satu per satu, prose itu seperti memasang wallpaper siap pakai untuk satu ruangan penuh.

Contoh kode

<!-- Memuat font dari Google Fonts di <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap"
  rel="stylesheet"
/>

/* src/style.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography"; /* plugin typography resmi */

@theme {
  /* Timpa font default seluruh situs */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  /* Tambah font baru → menghasilkan class font-display */
  --font-display: "Playfair Display", ui-serif, Georgia, serif;
}

# Pasang plugin typography
npm install -D @tailwindcss/typography

<!-- Hierarki tipografi sebuah hero -->
<section class="mx-auto max-w-2xl px-6 py-16 text-center">
  <p class="text-sm font-semibold tracking-widest text-indigo-600 uppercase">Kelas Baru</p>
  <h1 class="mt-3 font-display text-4xl leading-tight tracking-tight text-balance text-gray-900 md:text-6xl">
    Kuasai Tailwind CSS dalam Empat Minggu
  </h1>
  <p class="mt-6 text-lg/8 text-pretty text-gray-600">
    Belajar dari dasar sampai membangun komponen React yang siap produksi.
  </p>
</section>
<!-- → label kecil berhuruf kapital, judul serif besar yang terbagi rata,
       paragraf abu-abu dengan jarak baris lega -->

<!-- Memotong teks panjang -->
<p class="w-48 truncate">Judul produk yang sangat panjang sekali sampai tidak muat</p>
<!-- → "Judul produk yang sangat..." -->
<p class="line-clamp-2 w-64">Deskripsi panjang yang hanya boleh tampil dua baris saja di kartu ...</p>

<!-- Konten artikel dari CMS, ditata otomatis oleh plugin -->
<article class="prose prose-lg prose-indigo mx-auto dark:prose-invert">
  <h2>Apa itu Utility-First?</h2>
  <p>Utility-first adalah cara menulis CSS dengan <a href="#">class kecil</a>.</p>
  <ul>
    <li>Cepat</li>
    <li>Konsisten</li>
  </ul>
  <blockquote>Tulis sekali di komponen, pakai berkali-kali.</blockquote>
</article>
<!-- → judul, paragraf, link, list, dan kutipan tertata rapi tanpa class satu pun di dalamnya -->

Kesalahan umum

Memakai font-bold pada font yang tidak memuat ketebalan 700. Pastikan URL Google Fonts menyertakan wght@700.
Paragraf terlalu lebar. Teks lebih dari ±75 karakter per baris sulit dibaca. Batasi dengan max-w-prose atau max-w-2xl.
Kontras warna rendah, misalnya text-gray-300 di atas putih. Untuk teks isi, gunakan minimal text-gray-600 di latar putih.
Lupa @plugin setelah npm install. Di v4, plugin tidak aktif sampai didaftarkan di CSS. Menambahkannya ke tailwind.config.js tidak berpengaruh.
Menulis fontFamily di file konfigurasi JS. Di v4 cukup --font-nama di dalam @theme.

Latihan

Mudah, Buat judul h2 berukuran text-3xl, tebal, dengan jarak huruf rapat dan warna text-slate-900.
Sedang, Daftarkan font "Poppins" sebagai --font-heading di @theme, lalu pakai untuk semua judul kartu.
Menantang, Buat halaman blog sederhana: header dengan judul artikel, info penulis, lalu isi artikel memakai prose, dengan versi gelap memakai dark:prose-invert.

Lihat solusi

Judul:

<h2 class="text-3xl font-bold tracking-tight text-slate-900">Fitur Unggulan</h2>

Font heading:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap");
@import "tailwindcss";

@theme {
  --font-heading: "Poppins", sans-serif;
}

<h3 class="font-heading text-xl font-semibold">Kartu Premium</h3>

Halaman blog:

<main class="mx-auto max-w-3xl px-6 py-12">
  <header class="mb-10">
    <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">
      Lima Kebiasaan Developer Produktif
    </h1>
    <p class="mt-3 text-sm text-gray-500">Oleh Budi Santoso · 5 menit baca</p>
  </header>
  <article class="prose prose-lg dark:prose-invert">
    <p>Menjadi produktif bukan soal bekerja lebih lama.</p>
    <h2>1. Mulai dari tugas kecil</h2>
    <p>Pecah pekerjaan besar menjadi langkah yang bisa selesai dalam satu jam.</p>
  </article>
</main>

Ringkasan

text-* mengatur ukuran (dengan line-height bawaan); text-lg/7 mengatur ukuran dan line-height sekaligus.
font-* untuk ketebalan, leading-* untuk tinggi baris, tracking-* untuk jarak huruf.
truncate, line-clamp-*, text-balance, text-pretty membantu teks tampil rapi.
Font kustom didaftarkan sebagai --font-* di @theme; timpa --font-sans untuk font default.
Plugin typography dimuat dengan @plugin "@tailwindcss/typography"; lalu pakai prose.