Pseudo-Elements pada Hover, Focus, dan Other States dalam Tailwind CSS (::selection)

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

Sumber : Tailwindcss.com

Berikan gaya pada teks pilihan aktif menggunakan varian pilihan :

<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
  <p>
    So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my
    way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all
    living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
  </p>
</div>

Contoh :

<div
  class="mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 text-gray-700 selection:bg-fuchsia-300 selection:text-fuchsia-900 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300"
>
  <p>
    So I started to walk into the water. I won't lie to you boys, I was
    terrified. But I pressed on, and as I made my way past the breakers a
    strange calm came over me. I don't know if it was divine intervention or
    the kinship of all living things but I tell you Jerry at that moment, I
    <em>was</em> a marine biologist.
  </p>
</div>

Kami telah mendesain varian seleksi agar dapat diwariskan, sehingga Anda dapat menambahkannya di mana saja dalam struktur pohon dan akan diterapkan ke semua elemen turunannya.

Hal ini memudahkan Anda untuk mengatur warna seleksi agar sesuai dengan merek Anda di seluruh situs Anda :

<html>
  <head>
    <!-- ... -->
  </head>
  <body class="selection:bg-pink-300">
    <!-- ... -->
  </body>
</html>

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

Terima Kasih 😀😊😘👌👍 :)