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

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 :not().

Sumber : Tailwindcss.com

Gunakan varian `not-` untuk memberi gaya pada elemen ketika suatu kondisi tidak benar.

Ini sangat ampuh jika dikombinasikan dengan varian pseudo-class lainnya, misalnya menggabungkan `not-focus:` dengan `hover:` untuk hanya menerapkan gaya hover ketika elemen tidak fokus :

<button class="bg-indigo-600 hover:not-focus:bg-indigo-700">
  <!-- ... -->
</button>

Contoh :

<div class="grid place-items-center">
  <button
    type="button"
    class="rounded-full bg-indigo-600 px-5 py-2 text-sm leading-5 font-semibold text-white hover:not-focus:bg-indigo-700 focus:outline focus:outline-violet-300 active:bg-violet-700"
    tabindex="0"
  >
    Save changes
  </button>
</div>

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

Terima Kasih 😀😊😘👌👍 :)