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

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 ::first-line dan ::first-letter.

Sumber : Tailwindcss.com

Beri gaya pada baris pertama dalam blok konten menggunakan varian baris pertama, dan huruf pertama menggunakan varian huruf pertama :

<div class="text-gray-700">
  <p
    class="first-letter:float-left first-letter:mr-3 first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 first-line:tracking-widest first-line:uppercase"
  >
    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"?
  </p>
  <p class="mt-6">Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p>
</div>

Contoh :

<div
  class="mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 font-serif text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-200"
>
  <p
    class="first-letter:float-left first-letter:mr-3 first-letter:text-7xl first-letter:leading-none first-letter:font-bold first-letter:text-gray-900 first-line:tracking-widest first-line:uppercase dark:first-letter:text-white"
  >
    Well, let me tell you something, funny boy. Y'know that little stamp, the
    one that says "New York Public Library"? Well that may not mean anything
    to you, but that means a lot to me. One whole hell of a lot.
  </p>
  <p class="mt-6">
    Sure, go ahead, laugh if you want to. I've seen your type before: Flashy,
    making the scene, flaunting convention. Yeah, I know what you're thinking.
    What's this guy making such a big stink about old library books? Well, let
    me give you a hint, junior.
  </p>
</div>

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

Terima Kasih 😀😊😘👌👍 :)