DEV Community 👩‍💻👨‍💻

Cover image for How to Use Highlight Selected Text in Tailwind CSS
larainfo
larainfo

Posted on • Originally published at larainfo.com

How to Use Highlight Selected Text in Tailwind CSS

In this section we will see how to use highlight text in tailwind css. we will see, highlight text color , highlight text background color with Tailwind CSS 3.

Example 1

Tailwind CSS highlight section text color.

<div class="max-w-xl selection:text-purple-900">
  <p>
    Tailwind CSS color selector lorem ipsum dolor I made my way past the breakers
    a strange calm came over me
  </p>
</div>
Enter fullscreen mode Exit fullscreen mode

tailwind css simple highlight selected text

Example 2

Tailwind CSS highlight section background color.

<div class="max-w-xl selection:bg-purple-600">
  <p>
    Tailwind CSS color selector lorem ipsum dolor I made my way past the breakers
    a strange calm came over me
  </p>
</div>
Enter fullscreen mode Exit fullscreen mode

tailwind css background highlight selected text color

Example 3

Tailwind CSS highlight selection background color and text color.

<div class="max-w-xl selection:bg-purple-300 selection:text-purple-900">
  <p>
    Tailwind CSS color selector lorem ipsum dolor I made my way past the breakers
    a strange calm came over me
  </p>
</div>
Enter fullscreen mode Exit fullscreen mode

tailwind css highlight text color

Top comments (0)

🌚 Life is too short to browse without dark mode