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

byInzaghi's Blog Admin -
0

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 Induk (Styling based on Parent State).

Sumber : Tailwindcss.com


Saat Anda ingin memberi gaya pada sebuah elemen berdasarkan kondisi atau status elemen induknya, beri elemen induk tersebut kelas group, lalu gunakan varian group-* seperti group-hover untuk mengatur tampilan elemen target.

Arahkan kursor ke kartu untuk melihat kedua teks berubah warna secara bersamaan.

<a href="#" class="group ...">
  <div>
    <svg class="stroke-sky-500 group-hover:stroke-white ..." fill="none" viewBox="0 0 24 24">
      <!-- ... -->
    </svg>
    <h3 class="text-gray-900 group-hover:text-white ...">New project</h3>
  </div>
  <p class="text-gray-500 group-hover:text-white ...">Create a new project from a variety of starting templates.</p>
</a>

Contoh :

<a
  href="#"
  class="group mx-auto block max-w-xs space-y-3 rounded-lg bg-white p-4 shadow-lg ring-1 ring-gray-900/5 hover:bg-sky-500 hover:ring-sky-500 dark:bg-white/5 dark:ring-white/10"
  ><div class="flex items-center space-x-3">
    <svg
      class="h-6 w-6 stroke-sky-500 group-hover:stroke-white"
      fill="none"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M11 19H6.931A1.922 1.922 0 015 17.087V8h12.069C18.135 8 19 8.857 19 9.913V11"
      ></path>
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M14 7.64L13.042 6c-.36-.616-1.053-1-1.806-1H7.057C5.921 5 5 5.86 5 6.92V11M17 15v4M19 17h-4"
      ></path>
    </svg>
    <div
      class="text-sm font-semibold text-gray-900 group-hover:text-white dark:text-white"
    >
      New project
    </div>
  </div>
  <p class="text-sm text-gray-500 group-hover:text-white dark:text-gray-400">
    Create a new project from a variety of starting templates.
  </p></a
>

Membedakan Grup Bersarang

Saat menyusun grup bersarang, Anda dapat menata sesuatu berdasarkan status grup induk tertentu dengan memberikan nama grup unik pada induk tersebut menggunakan kelas group/{name}, dan menyertakan nama tersebut dalam varian menggunakan kelas seperti group-hover/{name} :

<ul role="list">
  {#each people as person}
    <li class="group/item ...">
      <!-- ... -->
      <a class="group/edit invisible group-hover/item:visible ..." href="tel:{person.phone}">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500 ..."><!-- ... --></svg>
      </a>
    </li>
  {/each}
</ul>

Contoh :

<ul
  role="list"
  class="mx-auto max-w-md border-x border-x-gray-200 p-2 dark:border-x-gray-800 dark:bg-gray-950/10"
>
  <li
    class="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5"
  >
    <div class="flex gap-4">
      <div class="flex-shrink-0">
        <img
          class="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
          alt=""
        />
      </div>
      <div class="w-full text-sm leading-6">
        <a href="#" class="font-semibold text-gray-900 dark:text-white"
          ><span class="absolute inset-0 rounded-xl" aria-hidden="true"></span
          >Leslie Abbott</a
        >
        <div class="text-gray-500">Co-Founder / CEO</div>
      </div>
    </div>
    <a
      href="#"
      class="group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400"
      ><span class="font-semibold transition group-hover/edit:text-gray-700"
        >Call</span
      ><svg
        class="mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path></svg
    ></a>
  </li>
  <li
    class="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5"
  >
    <div class="flex gap-4">
      <div class="flex-shrink-0">
        <img
          class="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
          alt=""
        />
      </div>
      <div class="w-full text-sm leading-6">
        <a href="#" class="font-semibold text-gray-900 dark:text-white"
          ><span class="absolute inset-0 rounded-xl" aria-hidden="true"></span
          >Hector Adams</a
        >
        <div class="text-gray-500">VP, Marketing</div>
      </div>
    </div>
    <a
      href="#"
      class="group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400"
      ><span class="font-semibold transition group-hover/edit:text-gray-700"
        >Call</span
      ><svg
        class="mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path></svg
    ></a>
  </li>
  <li
    class="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5"
  >
    <div class="flex gap-4">
      <div class="flex-shrink-0">
        <img
          class="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
          alt=""
        />
      </div>
      <div class="w-full text-sm leading-6">
        <a href="#" class="font-semibold text-gray-900 dark:text-white"
          ><span class="absolute inset-0 rounded-xl" aria-hidden="true"></span
          >Blake Alexander</a
        >
        <div class="text-gray-500">Account Coordinator</div>
      </div>
    </div>
    <a
      href="#"
      class="group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400"
      ><span class="font-semibold transition group-hover/edit:text-gray-700"
        >Call</span
      ><svg
        class="mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path></svg
    ></a>
  </li>
</ul>


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

Terima Kasih 😀😊😘👌👍 :)    

Tags

You may like these posts

Post a Comment

Previous Post Next Post