State variant: hover dan focus
Prefix state bekerja sama seperti pseudo-class: hover:bg-blue-700 = :hover { background: ... }. Jangan lupakan focus: — pengguna keyboard bergantung pada indikator fokus, dan menghapus outline tanpa menggantinya adalah kesalahan aksesibilitas yang sangat umum di proyek Tailwind. Tailwind juga punya focus-visible: yang hanya menyala saat pengguna memakai keyboard, sehingga indikator tidak muncul mengganggu ketika tombol diklik mouse.
👀 Contoh dulu
<a class="text-gray-600 hover:text-black hover:underline transition"> Tautan </a> <input class="border focus:border-blue-500 focus:outline-none">
Hasilnya: Tautan menghitam dan bergaris bawah saat disentuh kursor; input berganti warna tepi saat aktif diisi.
💡 Pola: state:properti-nilai. Selain hover & focus ada disabled:, active:, group-hover:, dan dark:.
📝 Sekarang giliranmu
Pada tombol, tambahkan hover:bg-blue-700, focus:ring-2, dan transition.