Styling Highlighted Text with Tailwind CSS
Tailwind just releasedwhich brings some fun new features thanks to the new .
JIT mode enabled Tailwind to calculate values on the fly. For instance, we could set specific widths with:
w-[200px] and specific colors with
Now we have the ability to
Note: This feature requires Tailwind 2.2+ and.
Here's making highlighted text have a yellow background:
To style highlighted text with Tailwind, we'll use the
You can turn the background of highlighted text to pink with:
<p class="selection:bg-pink-200"> After nearly a grueling hour of warfare with neither man scoring a fall, Hart locked in the Sharpshooter, his signature submission hold. As Michaels screamed in pain, the crowd were certain that Hart was about to walk away from WrestleMania XII as the still-World Heavyweight Champion. </p>
Let's say we want this site to have a yellow background when you highlight the text. We can do the following:
<div class="selection:bg-yellow-300 selection:text-black">way cool!</div>
I was going to embed a CodePen here, but this feature requires the
Here is ato see it in action.
JIT mode is adding some more fun stuff likeand also .
If you enjoyed this tutorial, We also have a Getting Started with Tailwind course.
Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.