State adalah keadaan elemen saat ini: sedang ditunjuk kursor, sedang dipilih untuk diketik, sedang ditekan, atau sedang dimatikan. Di Tailwind, nama keadaannya kamu tempel sebagai awalan: hover:bg-blue-600 artinya "pakai latar blue-600, tapi cuma selama kursor ada di atas elemen ini". Bayangin tombol lift. Bentuknya sama terus, tapi tampilannya ganti sesuai keadaan: biasa, menyala waktu ditekan, mati kalau lift-nya rusak. Awalan state melakukan hal yang sama untuk tombol dan kolom isian di website kamu.
🧪 Tebakan cepat: tombol
bg-blue-500 hover:bg-blue-600kamu tap di HP. Warnanya berubah jadi blue-600? Tebak dulu, jawabannya ada di bagian "Hover di HP".
Awalan state: class yang menunggu keadaan
Sama seperti md: dan dark:, awalan state cuma menyalakan class di belakangnya kalau syaratnya terpenuhi. Ini tombol yang sama dengan yang ada di Lab:
<button id="btn" class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-4 py-2 rounded">
Hover Saya
</button>
bg-blue-500gak punya awalan: warna biasa, selalu berlaku.hover:bg-blue-600menimpanya dengan biru yang lebih tua selama kursor ada di atas tombol. Kursor pergi, warnanya balik ke blue-500.active:bg-blue-700lebih tua lagi, selama tombolnya sedang ditekan.text-white px-4 py-2 rounded: teks putih, padding 16px kiri-kanan dan 8px atas-bawah, sudut 4px. Gak punya awalan, jadi sama di semua keadaan.
Dari hover:bg-blue-600, Tailwind v4 membuat CSS ini:
@media (hover: hover) {
.hover\:bg-blue-600:hover {
background-color: var(--color-blue-600);
}
}
:hoveradalah pseudo-class CSS yang sudah kamu kenal: berlaku selama kursor ada di atas elemen.@media (hover: hover)membatasinya ke perangkat yang memang bisa hover, misalnya laptop dengan mouse atau touchpad.
Keadaan lain: focus, focus-visible, active, disabled
| Awalan | Berlaku waktu | Contoh |
|---|---|---|
hover: |
kursor ada di atas elemen | hover:bg-blue-600 |
focus: |
elemen sedang fokus: kolom yang diklik untuk diketik, atau elemen yang dicapai lewat Tab | focus:border-blue-500 |
focus-visible: |
elemen fokus dan browser menilai tandanya perlu kelihatan, biasanya waktu pakai keyboard | focus-visible:ring-2 |
active: |
elemen sedang ditekan | active:bg-blue-700 |
disabled: |
elemen punya atribut disabled |
disabled:opacity-50 |
Ini kolom email dari Lab:
<input type="email" placeholder="Email" class="border-2 border-gray-300 focus:border-blue-500 rounded px-3 py-2">
- Biasanya border-nya abu-abu (
border-gray-300). Begitu kolomnya diklik dan siap diketik,focus:border-blue-500membuatnya biru. Klik di luar kolom, warnanya balik abu-abu. - Tanda fokus seperti ini penting buat pengguna keyboard: mereka pindah antar elemen dengan tombol Tab, dan perlu tahu sedang di mana.
focus-visible: mirip focus:, bedanya browser yang memutuskan kapan tandanya muncul: waktu kamu pindah pakai Tab, tandanya kelihatan; waktu tombol diklik pakai mouse, biasanya gak. Cocok untuk tombol: focus-visible:ring-2 focus-visible:ring-blue-300 menggambar cincin 2px berwarna blue-300 di sekeliling tombol.
Tombol dengan atribut disabled gak bisa diklik dan gak bisa dicapai lewat Tab. disabled:opacity-50 disabled:cursor-not-allowed bikin tombolnya pudar dan kursornya berubah jadi tanda dilarang, supaya pengguna tahu tombolnya mati.
Hover di HP
Layar sentuh gak punya kursor yang melayang di atas tombol. Browser di HP melaporkan bahwa alat input utamanya gak bisa hover, jadi @media (hover: hover) gak terpenuhi, dan hover:bg-blue-600 gak pernah dipakai. Tap tombolnya di HP, warnanya tetap blue-500. Itu jawaban tebakannya. active: tetap jalan selama jarimu menekan tombol.
Di Tailwind v3, hover: belum dibatasi begini, jadi di HP warna hover sering "nyangkut" setelah tombolnya di-tap. Di v4 itu sudah beres. Akibatnya buat desain: jangan sembunyikan info penting yang cuma muncul waktu hover, karena pengguna HP gak akan pernah melihatnya.
⚠️ Jebakan yang sering ketemu
- Cuma menulis versi hover-nya.
hover:bg-blue-600tanpabg-blue-500bikin tombolnya gak punya latar sebelum di-hover. Awalan state cuma menimpa, warna biasanya tetap harus ditulis. - Menghapus tanda fokus tanpa pengganti.
focus:outline-nonesaja bikin pengguna keyboard tersesat. Kalau outline bawaan browser dihapus, ganti dengan yang kelihatan, misalnyafocus-visible:ring-2. - Info penting cuma muncul saat hover. Tooltip atau tombol hapus yang baru kelihatan waktu hover gak bisa dicapai di HP.
- Salah ukuran sudut di latihan. Pemeriksa mengecek border-radius
4px, darirounded.rounded-md(6px) ataurounded-lg(8px) gak lolos.
TL;DR: Awalan state menyalakan class cuma di keadaan tertentu: hover: selama kursor di atas elemen, focus: waktu elemen fokus (kolom yang sedang diketik), focus-visible: waktu tanda fokusnya perlu kelihatan (biasanya lewat keyboard), active: selama ditekan, disabled: waktu elemen punya atribut disabled. Warna biasanya tetap ditulis tanpa awalan, versi state-nya menimpa: bg-blue-500 hover:bg-blue-600. Di Tailwind v4, hover: cuma jalan di perangkat yang bisa hover, jadi di HP gak berlaku.
