Alur Kerja Styling Cepat

Kenapa ini penting

Kecepatan adalah alasan utama orang memakai Tailwind. Tapi kecepatan itu hanya datang kalau kamu punya alur kerja yang jelas: bagaimana membaca daftar class orang lain, bagaimana menyusun class sendiri secara bertahap, dan bagaimana menambah interaksi seperti hover dan focus. Tanpa alur ini, kamu akan menebak-nebak class dan membuang waktu.

Modul ini melatih "otot" itu. Setelah selesai, kamu bisa membangun kartu dan tombol dari nol dalam beberapa menit, dan membaca kode Tailwind orang lain semudah membaca kalimat.

Konsep inti

Membaca class seperti kalimat

Nama utility Tailwind mengikuti pola properti-nilai. Kalau kamu memecah class menjadi bagian-bagian, artinya mudah ditebak:

Class	Dipecah	Artinya
`px-4`	p (padding) + x (kiri-kanan) + 4	padding kiri-kanan 1rem
`mt-2`	m (margin) + t (top) + 2	margin atas 0.5rem
`text-lg`	text + lg	ukuran font besar
`text-gray-700`	text + warna gray + shade 700	warna teks abu tua
`rounded-lg`	rounded + lg	sudut membulat besar
`hover:bg-blue-700`	variant hover + bg-blue-700	latar biru tua saat hover

Pola variant adalah variant:utility. Variant bisa ditumpuk: md:hover:underline artinya "di layar md ke atas dan saat hover, beri garis bawah".

Menyusun class secara bertahap (outside-in)

Analoginya seperti mendekorasi kamar: pasang dinding dan lantai dulu, baru lemari, baru hiasan. Urutan yang enak:

Layout & ukuran: flex, grid, w-full, max-w-sm.
Spacing: p-6, gap-4, mt-2.
Kotak: bg-white, rounded-xl, border, shadow-md.
Tipografi: text-lg, font-semibold, text-gray-900.
Interaksi: hover:, focus-visible:, active:, transition.
Responsif & tema: md:, dark:.

Kamu tidak perlu benar dari awal. Tambah satu class, lihat browser, tambah lagi. Inilah "rapid" dalam rapid styling.

State variants dasar

hover: saat kursor di atas elemen. Catatan v4: hover: hanya aktif di perangkat yang mendukung hover (@media (hover: hover)), jadi di HP layar sentuh efek hover tidak "nyangkut" setelah diketuk.
focus: saat elemen difokus (diklik atau lewat Tab).
focus-visible: saat difokus lewat keyboard. Ini lebih ramah untuk aksesibilitas karena cincin fokus tidak muncul saat diklik mouse.
active: saat sedang ditekan.
disabled: saat atribut disabled ada.

Catatan perilaku tombol di v4

Preflight (reset CSS bawaan Tailwind) v4 membuat <button> memakai cursor: default, sama seperti perilaku asli browser. Kalau kamu ingin kursor tangan, tambahkan cursor-pointer secara eksplisit.

Contoh kode

Membangun tombol dari nol, langkah demi langkah:

<!-- Langkah 1: tombol polos (preflight membuatnya tanpa gaya) -->
<button>Daftar Sekarang</button>

<!-- Langkah 2: beri warna dan spacing -->
<button class="bg-indigo-600 px-5 py-2.5 text-white">Daftar Sekarang</button>

<!-- Langkah 3: bentuk dan tipografi -->
<button class="rounded-lg bg-indigo-600 px-5 py-2.5 font-semibold text-white">
  Daftar Sekarang
</button>

<!-- Langkah 4: interaksi lengkap -->
<button
  class="cursor-pointer rounded-lg bg-indigo-600 px-5 py-2.5 font-semibold text-white
         transition hover:bg-indigo-700 active:scale-95
         focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600
         disabled:cursor-not-allowed disabled:opacity-50"
>
  Daftar Sekarang
</button>
<!-- → tombol ungu, makin gelap saat hover, sedikit mengecil saat ditekan,
       cincin outline saat difokus keyboard, pudar saat disabled -->

Membangun kartu produk dari nol:

<article class="max-w-sm overflow-hidden rounded-2xl bg-white shadow-md transition hover:shadow-xl">
  <!-- Gambar memenuhi lebar kartu, rasio 4:3 -->
  <img
    src="https://picsum.photos/seed/sepatu/600/450"
    alt="Sepatu lari biru"
    class="aspect-4/3 w-full object-cover"
  />
  <div class="p-5">
    <!-- Label kategori kecil -->
    <span class="text-xs font-semibold tracking-wide text-indigo-600 uppercase">Olahraga</span>
    <h3 class="mt-1 text-lg font-bold text-gray-900">Sepatu Lari Ringan</h3>
    <p class="mt-2 text-sm text-gray-600">
      Bantalan empuk dan sol anti-slip untuk lari pagi di jalur mana pun.
    </p>
    <div class="mt-4 flex items-center justify-between">
      <span class="text-xl font-bold text-gray-900">Rp349.000</span>
      <button class="cursor-pointer rounded-lg bg-gray-900 px-4 py-2 text-sm text-white hover:bg-gray-700">
        Beli
      </button>
    </div>
  </div>
</article>
<!-- → kartu putih bersudut bulat, bayangan membesar saat hover,
       harga di kiri dan tombol "Beli" di kanan -->

Input dengan focus state:

<label class="block">
  <span class="text-sm font-medium text-gray-700">Email</span>
  <input
    type="email"
    placeholder="kamu@contoh.com"
    class="mt-1 w-full rounded-md border border-gray-300 px-3 py-2
           placeholder:text-gray-400
           focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-hidden"
  />
</label>
<!-- → saat diklik, border jadi ungu dengan cincin ungu muda,
       outline bawaan browser disembunyikan -->

Kesalahan umum

Menulis semua class sekaligus lalu bingung kenapa tidak jalan. Tambah sedikit demi sedikit dan cek browser tiap langkah.
Memakai outline-none untuk menghapus outline fokus. Di v4, utility yang setara dengan outline-none versi v3 namanya outline-hidden. Dan jangan hilangkan fokus tanpa pengganti (ring atau outline lain), karena pengguna keyboard jadi tersesat.
Mengandalkan hover: untuk informasi penting. Di layar sentuh hover tidak ada. Info penting harus terlihat tanpa hover.
Lupa cursor-pointer di tombol. v4 tidak lagi menambahkannya otomatis.
Menulis class bertabrakan seperti p-2 p-4. Hasilnya tergantung urutan di CSS, bukan urutan di HTML. Pakai satu saja.

Latihan

Mudah, Jelaskan arti class mx-auto mt-8 max-w-md text-center.
Sedang, Buat tombol "Hapus" berwarna merah yang menjadi lebih gelap saat hover dan menampilkan cincin merah saat difokus keyboard.
Menantang, Buat kartu testimoni berisi foto bulat, nama, jabatan, dan kutipan. Kartu sedikit naik (-translate-y-1) saat hover.

Lihat solusi

mx-auto margin kiri-kanan otomatis (elemen di tengah), mt-8 margin atas 2rem, max-w-md lebar maksimum 28rem, text-center teks rata tengah.
Tombol hapus:

<button
  class="cursor-pointer rounded-md bg-red-600 px-4 py-2 text-white hover:bg-red-700
         focus-visible:ring-4 focus-visible:ring-red-300 focus-visible:outline-hidden"
>
  Hapus
</button>

Kartu testimoni:

<figure class="max-w-sm rounded-xl bg-white p-6 shadow-md transition hover:-translate-y-1 hover:shadow-lg">
  <blockquote class="text-gray-700">
    "Materinya runtut, saya bisa bikin landing page sendiri dalam seminggu."
  </blockquote>
  <figcaption class="mt-4 flex items-center gap-3">
    <img src="https://i.pravatar.cc/80?img=5" alt="Foto Dewi" class="size-12 rounded-full object-cover" />
    <div>
      <p class="font-semibold text-gray-900">Dewi Anggraini</p>
      <p class="text-sm text-gray-500">UI Designer</p>
    </div>
  </figcaption>
</figure>
<!-- → kartu naik sedikit dan bayangannya membesar saat hover -->

Ringkasan

Baca class sebagai properti-nilai: px-4 = padding horizontal skala 4.
Variant ditulis variant:utility dan bisa ditumpuk, misalnya md:hover:underline.
Susun class bertahap: layout, spacing, kotak, tipografi, interaksi, responsif.
focus-visible: lebih ramah aksesibilitas daripada focus: untuk cincin fokus.
Di v4, hover: hanya aktif di perangkat yang mendukung hover, dan tombol perlu cursor-pointer eksplisit.