Pseudo-Classes pada Hover, Focus, dan Other States dalam Tailwind CSS (Styling based on Sibling State)

Halo gais! 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 Penataan berdasarkan Status Saudara Kandung (Styling based on Sibling State).

Sumber : Tailwindcss.com

Saat Anda perlu memberi gaya pada suatu elemen berdasarkan status elemen saudaranya, tandai elemen saudara tersebut dengan kelas peer, dan gunakan varian peer-* seperti peer-invalid untuk memberi gaya pada elemen target :

<form>
  <label class="block">
    <span class="...">Email</span>
    <input type="email" class="peer ..." />
    <p class="invisible peer-invalid:visible ...">Please provide a valid email address.</p>
  </label>
</form>

Contoh :

<div
  class="mx-auto max-w-md border-x border-x-gray-200 px-6 pt-6 pb-5 dark:border-x-gray-800 dark:bg-gray-950/10"
>
  <form>
    <div>
      <label
        for="email-2"
        class="block text-sm font-medium text-gray-700 dark:text-gray-300"
        >Email</label
      >
      <div class="mt-1">
        <input
          type="email"
          id="email-2"
          class="peer 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"
          placeholder="you@example.com"
          name="email"
          value="george@krugerindustrial."
        />
        <p class="invisible mt-2 text-sm text-pink-600 peer-invalid:visible">
          Please provide a valid email address.
        </p>
      </div>
    </div>
  </form>
</div>

Hal ini memungkinkan untuk melakukan berbagai trik menarik, seperti label mengambang misalnya, tanpa menggunakan JavaScript.

Pola ini bekerja dengan setiap varian pseudo-class, misalnya peer-focus, peer-required, dan peer-disabled.

Membedakan Rekan (Differentiating Peers)

Saat menggunakan lebih dari satu peer, Anda bisa mengatur gaya elemen berdasarkan kondisi peer tertentu dengan memberi nama unik pada peer tersebut menggunakan kelas peer/{nama}. Nama ini kemudian dipanggil pada varian kelas, misalnya peer-checked/{nama}, untuk menyesuaikan tampilannya :

<fieldset>
  <legend>Published status</legend>
  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>
  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>
  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>

Contoh :

<fieldset
  class="mx-auto max-w-md border-x border-x-gray-200 p-8 text-sm text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-100"
>
  <div
    class="mb-6 border-b border-gray-200 pb-2 text-base font-semibold dark:border-gray-800"
  >
    Published status
  </div>
  <input
    id="draft"
    class="peer/draft form-radio mr-2 mb-0.5 border-gray-300 text-sky-400 focus:ring-sky-400"
    type="radio"
    name="status"
    checked=""
  /><label class="font-medium peer-checked/draft:text-sky-500" for="draft"
    >Draft</label
  ><input
    id="published"
    class="peer/published form-radio mr-2 mb-0.5 ml-4 border-gray-300 text-sky-400 focus:ring-sky-400"
    type="radio"
    name="status"
  /><label
    class="font-medium peer-checked/published:text-sky-500"
    for="published"
    >Published</label
  >
  <div
    class="mt-4 hidden text-gray-500 peer-checked/draft:block dark:text-gray-400"
  >
    Drafts are only visible to administrators.
  </div>
  <div
    class="mt-4 hidden text-gray-500 peer-checked/published:block dark:text-gray-400"
  >
    Your post will be publicly visible on your site.
  </div>
</fieldset>

Penamaan peer bersifat bebas dan tidak memerlukan konfigurasi tambahan. Cukup tentukan nama langsung di markup HTML, dan Tailwind akan secara otomatis menghasilkan CSS yang dibutuhkan.

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

Terima Kasih 😀😊😘👌👍 :)