Interaksi Ajaib: Hover, Focus & State
Website yang bagus harus merespon sentuhan penggunanya. Sebuah tombol harus berubah warna saat disentuh
(Hover), dan sebuah kolom ketik harus menyala saat dipilih (Focus).
Dalam Tailwind CSS, kita mengatur "State" (Status/Kondisi) elemen dengan cara menempelkan kata kunci hover: atau focus: tepat sebelum nama
class! Sistem ini dikenal dengan nama Variants.
🖱️ 1. Dasar Interaksi (Hover, Focus, Active)
Mari bedah tiga status yang paling populer dipakai di hampir seluruh website di dunia. Cobalah berinteraksi dengan demo di bawah ini.
Hover (Dilewati Mouse)
hover:bg-emerald-500hover:scale-110hover:-rotate-3
Active (Ditekan/Klik Tahan)
active:bg-indigo-700active:scale-95active:translate-y-2
Focus (Sedang Diketik)
focus:border-cyan-500focus:bg-whitefocus:ring-4
👨👧 2. Sihir "Group-Hover" (Respon Anak terhadap Induk)
Kasus rumit di CSS zaman dulu: "Bisa gak waktu MOUSE saya arahkan ke KOTAK LUAR (Induk), maka TULISAN DI
DALAM (Anak) ikut berubah warna?"
Di Tailwind, jawabannya: SANGAT BISA! Gunakan class pengenal group pada induk, dan group-hover: pada anak.
Arahkan Mouse-mu ke Kotak Putih ini 👇
group-hover:text-indigo-600 Paket Luar Angkasa
Jelajahi galaksi dengan roket super cepat kami. Pengalaman tak terlupakan.
👯 3. Sihir "Peer" (Check & Focus Saudara Sebelah)
Satu level di atas `group`. Jika kamu punya sebuah Input Checkbox yang tersembunyi, dan kamu ingin warna label
kotak di sebelahnya menyala KETIKA checkbox itu dicentang (checked). Tailwind punya jurus bernama peer pada input pertama, dan peer-checked: pada tetangga di
sebelahnya!
Klik salah satu metode pembayaran di bawah
📋 Senjata Kombinasi Varian
Tailwind membolehkanmu menggabung (menumpuk) beberapa Prefix/Awalan sekaligus menjadi satu mantra sihir panjang yang elegan.
"Hanya pada layar laptop (md), jika di-hover oleh mouse, maka perbesar skalanya 10%!"
Kalimat di atas jika diterjemahkan ke class Tailwind menjadi cuma: md:hover:scale-110.
Luar Biasa!