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

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 :required dan :disabled.

Sumber : Tailwindcss.com

Gaya elemen formulir dalam berbagai status menggunakan varian seperti diperlukan, tidak valid, dan dinonaktifkan :

Coba buat alamat email yang valid untuk melihat perubahan gaya

<input
  type="text"
  value="izzumi"
  disabled
  class="invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20 ..."
/>

Contoh :

<div
  class="mx-auto max-w-md border-x border-x-gray-200 px-6 py-5 dark:border-x-gray-800 dark:bg-gray-950/10"
>
  <form>
    <div>
      <label
        for="username"
        class="block text-sm font-medium text-gray-700 dark:text-gray-300"
        >Username</label
      >
      <div class="mt-1">
        <input
          type="text"
          id="username"
          class="block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"
          disabled=""
          name="username"
          value="izzumi"
        />
      </div>
    </div>
    <div class="mt-6">
      <label
        for="email"
        class="block text-sm font-medium text-gray-700 dark:text-gray-300"
        >Email</label
      >
      <div class="mt-1">
        <input
          type="email"
          id="email-1"
          class="block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"
          placeholder="you@example.com"
          name="email"
          value="inzaghi@inzatechofficial."
        />
      </div>
    </div>
    <div class="mt-6">
      <label
        for="password"
        class="block text-sm font-medium text-gray-700 dark:text-gray-300"
        >Password</label
      >
      <div class="mt-1">
        <input
          type="password"
          id="password"
          autocomplete="none"
          class="block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20"
          name="password"
          value="Bosco"
        />
      </div>
    </div>
    <div class="mt-6 text-right">
      <button
        class="rounded-md bg-sky-500 px-5 py-2.5 text-sm leading-5 font-semibold text-white hover:bg-sky-700"
      >
        Save changes
      </button>
    </div>
  </form>
</div>

Menggunakan varian untuk hal semacam ini dapat mengurangi jumlah logika kondisional dalam templat Anda, memungkinkan Anda menggunakan rangkaian kelas yang sama terlepas dari status input, dan membiarkan browser menerapkan gaya yang tepat untuk Anda.

Tailwind juga menyertakan varian untuk status formulir lain seperti :read-only, :indeterminate, :checked, 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 😀😊😘👌👍 :)