Elemen Jadi "Perasa": Ngasih Style Beda Pas Di-Hover, Fokus, atau Aktif Pake State Variants Tailwind!

Udah bisa bikin layout responsif pake breakpoint Tailwind? Keren! Sekarang, gimana caranya biar elemen-elemen di halaman kita itu gak cuma diem aja, tapi bisa ngasih respons visual pas pengguna berinteraksi sama mereka? Misalnya, tombol berubah warna pas mouse diarahin ke atasnya, atau input field dapet border beda pas lagi aktif diketik.

Nah, di CSS biasa kita pake pseudo-classes kayak :hover, :focus, :active, dll. buat ngelakuin ini. Di Tailwind CSS, konsepnya mirip, tapi kita pakenya State Variants (Varian Status). State variants ini adalah prefix (awalan) yang kamu tambahin ke utility class biasa buat ngasih tau kalau utility itu cuma berlaku pas elemen lagi dalam state tertentu.

Cara Kerja State Variants di Tailwind

Sama kayak modifier breakpoint, state variants ini juga dipake sebagai prefix sebelum utility class.

• Sintaks: state:utilityClass
  • Contoh: hover:bg-blue-700, focus:ring-2, active:scale-95

Tailwind nyediain banyak banget state variants yang ngikutin pseudo-class di CSS. Ini beberapa yang paling sering dipake:

1. :hover -> hover: (Pas Mouse di Atas Elemen / Hover)

Ini yang paling umum! Dipake buat ngubah style elemen pas kursor mouse pengguna lagi ada di atasnya.

<button class="bg-green-500 text-white p-3 rounded 
               hover:bg-green-600 hover:shadow-lg transition-all">
  Tombol Hover Keren
</button>

• bg-green-500: Background normalnya hijau.
• hover:bg-green-600: Pas di-hover, background jadi hijau lebih tua.
• hover:shadow-lg: Pas di-hover, nambahin bayangan yang lebih gede.
• transition-all (atau transition spesifik): Biar perubahan pas hover-nya jadi smooth (inget materi Transisi CSS?).

2. :focus -> focus: (Pas Elemen Dapat Fokus)

Dipake buat ngasih style ke elemen pas dia lagi dapet fokus. Biasanya relevan buat elemen interaktif kayak link, tombol, dan input field (pas di-klik atau di-Tab ke situ). Penting banget buat aksesibilitas!

<input type="text" 
       class="border border-gray-300 p-2 rounded 
              focus:border-blue-500 focus:ring-2 focus:ring-blue-300 focus:outline-none transition-all"
       placeholder="Ketik di sini...">

• focus:border-blue-500: Pas input field ini dapet fokus, warna bordernya jadi biru.
• focus:ring-2 focus:ring-blue-300: Nambahin efek "ring" (kayak outline tapi bisa di-style lebih bebas) warna biru muda di sekitar input.
• focus:outline-none: Ngilangin outline default browser (tapi kita udah ganti pake ring, jadi visual fokusnya tetep ada dan jelas!).

3. :active -> active: (Pas Elemen Lagi Diteken/Diklik)

Dipake buat ngasih style pas elemen lagi aktif diteken (mouse diteken di atasnya, atau tombol keyboard diteken buat elemen yang bisa difokus).

<button class="bg-red-500 text-white p-3 rounded 
               hover:bg-red-600 
               active:bg-red-700 active:scale-95 active:shadow-inner transition-transform">
  Tombol Aktif
</button>

• active:bg-red-700: Pas tombol diteken, background jadi merah lebih gelap lagi.
• active:scale-95: Pas diteken, tombolnya kayak "masuk" dikit (skalanya jadi 95%).
• active:shadow-inner: Bayangannya jadi ke dalem.

4. :disabled -> disabled: (Pas Elemen Dinonaktifkan)

Dipake buat ngasih style ke elemen form (kayak <button>, <input>) yang punya atribut disabled.

<button class="bg-gray-400 text-gray-700 p-3 rounded cursor-not-allowed opacity-50" disabled>
  Tombol Nonaktif
</button>
 
<button class="bg-blue-500 text-white p-3 rounded
               disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:opacity-75">
  Tombol Bisa Jadi Nonaktif
</button>

• Di contoh kedua, kita definisiin style normal dan style pas disabled. Kalau atribut disabled ditambahin ke tombol itu (misal pake JavaScript), style disabled:-nya bakal otomatis kepake.

5. State untuk List dan Tabel (Child Variants)

Tailwind juga punya varian buat nargetin elemen anak tertentu dalam konteks list atau grup:

• first: (Pseudo-class :first-child): Style buat anak pertama.
• last: (Pseudo-class :last-child): Style buat anak terakhir.
• odd: (Pseudo-class :nth-child(odd)): Style buat anak ganjil.
• even: (Pseudo-class :nth-child(even)): Style buat anak genap.

<ul>
  <li class="p-2 border-b first:border-t first:rounded-t-md last:border-b-0 last:rounded-b-md odd:bg-slate-100 even:bg-slate-50">Item 1</li>
  <li class="p-2 border-b first:border-t first:rounded-t-md last:border-b-0 last:rounded-b-md odd:bg-slate-100 even:bg-slate-50">Item 2</li>
  <li class="p-2 border-b first:border-t first:rounded-t-md last:border-b-0 last:rounded-b-md odd:bg-slate-100 even:bg-slate-50">Item 3</li>
</ul>

• first:border-t: Anak pertama punya border atas.
• last:border-b-0: Anak terakhir gak punya border bawah (misal, buat ngilangin double border sama parent).
• odd:bg-slate-100: Anak ganjil background-nya slate-100 (efek zebra).

6. Group Variants (group-hover:, group-focus:, dll.) - Styling Anak Berdasarkan State Parent

Kadang, kita mau ngubah style elemen anak pas elemen parent-nya lagi di-hover atau fokus. Di CSS biasa ini agak ribet. Di Tailwind, gampang banget pake Group Variants!

1. Tambahin class group ke elemen parent.
2. Di elemen anak, pake prefix group-hover:, group-focus:, group-active:, dll. sebelum utility class-nya.

<a href="#" 
   class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 
          hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <!-- Icon SVG (misalnya) -->
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">Judul Kartu</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">
    Deskripsi singkat di kartu ini akan berubah warna pas seluruh kartu di-hover.
  </p>
</a>

Di contoh ini:

• Link <a> dikasih class group.
• Ikon SVG di dalemnya (<svg>) punya class group-hover:stroke-white. Artinya, pas parent (<a> yang punya class group) di-hover, warna stroke SVG ini jadi putih.
• <h3> dan <p> di dalemnya juga pake group-hover:text-white, jadi teks mereka juga jadi putih pas kartu di-hover.

Group variants ini super ngebantu buat bikin komponen interaktif yang lebih kompleks.

7. Peer Variants (peer-focus:, peer-checked:, dll.) - Styling Saudara Berdasarkan State Saudara Lain

Ini mirip group variants, tapi buat ngubah style elemen berdasarkan state dari elemen saudaranya (sibling) yang "ditandain".

1. Kasih class peer ke elemen yang state-nya mau "dipantau" (misal, sebuah checkbox input).
2. Di elemen saudara yang mau di-style (yang muncul setelah elemen peer di HTML), pake prefix peer-checked:, peer-focus:, peer-invalid:, dll.

<div class="relative">
  <input id="email" type="email" 
         class="peer w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-blue-500
                invalid:border-red-500 invalid:text-red-600
                focus:invalid:border-red-500 focus:invalid:ring-red-500" 
         placeholder="contoh@email.com" required />
  <label for="email" 
         class="absolute left-2 -top-2.5 bg-white px-1 text-xs text-gray-500
                transition-all 
                peer-placeholder-shown:top-2 peer-placeholder-shown:text-base 
                peer-focus:-top-2.5 peer-focus:text-xs peer-focus:text-blue-600
                peer-invalid:text-red-600 peer-focus:peer-invalid:text-red-600">
    Alamat Email
  </label>
  <p class="mt-2 text-red-600 text-sm invisible peer-invalid:visible">
    Format email tidak valid atau email wajib diisi.
  </p>
</div>

Contoh di atas agak kompleks, tapi nunjukin:

• Label (<label>) posisinya bisa berubah (kayak floating label) pas input (.peer) lagi placeholder-shown (belum diisi) atau pas lagi focus.
• Pesan error (<p>) jadi visible pas input (.peer) lagi dalam state invalid.

Peer variants ini ngebuka banyak kemungkinan buat bikin form yang lebih interaktif dan UX-nya bagus.

Mengkombinasikan dengan Modifier Breakpoint

Sama kayak yang udah kita bahas di materi responsif, kamu juga bisa gabungin state variants ini sama modifier breakpoint. Urutannya: breakpoint:state:utility.

<button class="bg-blue-500 text-white p-2 
               md:hover:bg-green-500 md:focus:ring-green-300 
               sm:active:scale-90">
  Tombol Super Responsif
</button>

Artinya:

• Di layar kecil (di bawah sm): Gak ada efek hover/focus/active khusus dari Tailwind (selain default).
• Di layar sm ke atas: Pas di-active, tombolnya ngecil (scale-90).
• Di layar md ke atas: Pas di-hover, background jadi hijau. Pas focus, ada ring hijau.

State variants ini adalah salah satu "bumbu rahasia" yang bikin Tailwind CSS jadi enak banget dipake buat bikin UI yang dinamis dan modern. Kamu gak perlu lagi nulis banyak pseudo-class di file CSS terpisah. Cukup tambahin prefix yang sesuai ke utility class-mu di HTML, dan Tailwind bakal ngurusin sisanya!

Eksperimen dengan berbagai kombinasi state variants ini di komponen-komponen sederhanamu. Liat gimana mereka bisa ngasih feedback visual yang instan ke pengguna.