Belajar Tailwind CSS - Utility-First Workflow — Kelas Dasar yang Paling Sering Dipakai

#Pendahuluan

Di episode 3 toolchain kalian sudah siap. Sekarang masuk ke bagian yang paling sering dipakai: menulis utility class. Episode 4 membahas kelompok kelas dasar — typography, spacing, sizing, display, positioning, flexbox, grid, dan state variants. Ini adalah kosakata inti Tailwind.

Kunci mengingat nama kelas adalah memetakannya ke properti CSS: p- untuk padding, m- untuk margin, text- untuk ukuran dan warna teks, w- dan h- untuk dimensi. Setelah pola ini dikuasai, menebak kelas baru menjadi mudah — konsistensi naming Tailwind memang dirancang seperti itu.

#Typography Utilities

#Ukuran, Berat, dan Warna Teks

Ukuran teks memakai skala text-xs sampai text-9xl, dengan text-base sebagai default. Berat font memakai font-thin sampai font-black. Warna teks memakai text-* dengan palet warna bawaan:

Contoh typography

<h1 class="text-4xl font-bold text-gray-900">Judul Halaman</h1>
<p class="text-sm font-medium text-gray-600">Deskripsi singkat.</p>

text-gray-900 memakai token warna gray dengan tingkatan 900. Kalian tidak perlu mengingat kode hex — cukup token-nya.

#Line-height dan Letter-spacing

Line-height memakai leading-*: leading-tight, leading-relaxed, leading-6, dan leading-none. Letter-spacing memakai tracking-*: tracking-tight, tracking-wide, tracking-widest. Keduanya penting untuk keterbacaan teks panjang:

Leading dan tracking

<p class="text-lg leading-relaxed tracking-wide">
  Paragraf dengan jarak baris dan spasi huruf yang nyaman dibaca.
</p>

#Spacing dan Sizing

#Padding dan Margin

Skala spacing Tailwind adalah kelipatan 0.25rem: p-1 sama dengan 4px, p-4 sama dengan 16px. Aturan arah memakai suffix x, y, dan sisi tunggal t, r, b, l:

Padding dan margin

<div class="px-4 py-2 mt-8 mb-4 mx-auto max-w-md">
  Padding horizontal 4, vertikal 2, margin auto di kiri-kanan.
</div>

mx-auto memusatkan elemen blok secara horizontal — salah satu kelas yang paling sering dipakai untuk layout.

#Lebar dan Tinggi

Lebar dan tinggi memakai skala yang sama: w-64 berarti 16rem, h-32 berarti 8rem. Ada juga bentuk fraksi dan relatif: w-full, w-1/2, min-h-screen, max-w-md:

Sizing

<img src="foto.jpg" alt="Contoh" class="w-full h-48 object-cover rounded-lg" />
<div class="max-w-lg mx-auto">
  Konten dibatasi lebar maksimal 32rem.
</div>

#Display dan Positioning

Display: block, inline-block, inline, flex, grid, dan hidden. Positioning: relative, absolute, fixed, sticky, dengan pasangan top-*, right-*, bottom-*, left-*, serta z-* untuk urutan lapisan:

Positioning

<div class="relative h-40">
  <div class="absolute inset-0 bg-black/50"></div>
  <button class="absolute bottom-4 right-4 z-10">Tindakan</button>
</div>

absolute inset-0 membentangkan elemen menutupi seluruh parent relatif — teknik umum untuk overlay.

#Flexbox dan Grid

#Layout Flex

Aktifkan dengan flex, arah dengan flex-row atau flex-col, lalu atur dengan justify-* dan items-*. Jarak antar item memakai gap-*:

Layout flex

<div class="flex items-center justify-between gap-4 p-4">
  <div class="flex-1">Kiri</div>
  <div class="flex-1">Tengah</div>
  <div class="flex-1">Kanan</div>
</div>

#Layout Grid

Aktifkan dengan grid, tentukan kolom dengan grid-cols-*, dan atur span dengan col-span-*:

Layout grid

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Sel lebar</div>
  <div>Sel sempit</div>
</div>

grid-cols-3 membuat tiga kolom sama besar; col-span-2 membuat satu item memakai dua kolom.

#State & Variants

Variants memungkinkan gaya berubah sesuai kondisi: hover:, focus:, focus-visible:, active:, dan disabled:. Mereka dipakai sebagai prefix sebelum kelas:

State variants

<button
  class="rounded bg-blue-500 px-4 py-2 text-white
         hover:bg-blue-600 active:bg-blue-700
         focus-visible:ring-2 focus-visible:ring-blue-300
         disabled:opacity-50 disabled:cursor-not-allowed"
>
  Simpan
</button>

hover:bg-blue-600 mengubah warna latar saat kursor di atas, disabled:opacity-50 meredupkan tombol saat nonaktif. Variants dapat digabung dengan breakpoint — md:hover:bg-blue-600 — dan pola ini akan diperdalam di episode 5 dan 17.

#Penutup

Episode 4 membuka kosakata inti Tailwind: typography, spacing, sizing, display, positioning, flexbox, grid, dan state variants. Kalian sekarang bisa membangun layout sederhana tanpa menulis satu baris CSS kustom.

Inti yang harus dibawa pulang:

• Kelas Tailwind memetakan langsung ke properti CSS: p-, m-, text-, w-, h-.
• Skala spacing berbasis 0.25rem; suffix x, y, t, r, b, l mengatur arah.
• mx-auto memusatkan elemen blok; absolute inset-0 menutupi parent.
• Flexbox dan grid cukup dengan flex, grid-cols-*, justify-*, items-*, gap-*.
• Variants hover, focus, active, disabled adalah prefix sebelum kelas.
• Kombinasi md:hover:bg-blue-600 memulai pola responsive state.

Di episode 5 selanjutnya kita akan membahas responsive design & breakpoints — sistem screens di config, pendekatan mobile-first, cara memakai utility per breakpoint, dan pola breakpoint kompleks untuk layout yang adaptif.