Pseudo-Classes pada Hover, Focus, dan Other States dalam Tailwind CSS (:hover, :focus, dan :active)

Hello guys! Tailwind CSS merupakan Framework CSS yang banyak digunakan di Aplikasi Web Modern saat ini. Kali ini kita akan membuat Program Pseudo-Classes pada Hover, Focus, dan Other States dalam Tailwind CSS, khususnya pada :hover, :focus, dan :active.

Sumber : Tailwindcss.com

Elemen gaya saat mengarahkan kursor, fokus, dan aktif menggunakan varian mengarahkan kursor, fokus, dan aktif :

Coba berinteraksi dengan tombol ini untuk melihat status hover, fokus, dan aktif

<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700 ...">
  Save changes
</button>

Contoh :

<button
  type="button"
  class="rounded-full bg-violet-500 px-5 py-2 text-sm leading-5 font-semibold text-white hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700"
>
  Save changes
</button>

Tailwind juga menyertakan varian untuk status interaktif lainnya seperti :visited, :focus-within, :focus-visible, dan lainnya.

Lihat referensi pseudo-class untuk daftar lengkap varian pseudo-class yang tersedia.

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)