Modern CSS with Tailwind, 2nd Edition

Modifiers

There’s one more Tailwind feature to talk about before we get to the utility classes: modifiers.

Modifiers are Tailwind’s way of using CSS pseudo-classes, pseudo-elements, and media queries in the HTML markup. For example, it’s common to want objects to display differently when the user drags a mouse over them, which corresponds to the CSS pseudo-class, hover.

In Tailwind, you can define utilities in terms of CSS pseudo-classes by adding modifiers to other Tailwind utilities. If you want an anchor tag to have an underline when the mouse goes over it, you could do this:

<a class="hover:underline">Click me</a>

That’s compact, reasonably straightforward to read, and defined along with the HTML so it’s clear when it applies. You can ...