Now with Tailwind CSS v3, you can change the color of the underline for underlined text.
The classes for making this are all of the form decoration-{color}
.
Sidenote: they’re named this way because the underline
class in Tailwind technically sets the CSS property text-decoration: underline
. For example, Tailwind also has a line-through
class, which sets text-decoration: line-through
(crossing something out). So the decoration-{color}
classes can also be used to change the color of the strikethrough line.
For example, you could make the underline under a piece of text red:
<p class="underline decoration-red-500">Hello, world!</p>
Whatever colors work normally with Tailwind CSS will also work here. You can also take a look at Tailwind’s documentation for a full list of possible colors.