Prefixes
Explore how to apply prefixes in Tailwind CSS to create hover effects and responsive styles. Understand how to use pseudo-class prefixes like hover and screen size prefixes such as sm and lg to control element appearance. This lesson helps you define dynamic styles directly in HTML and customize utility generation for various CSS properties.
We'll cover the following...
We have to learn one more unique feature before we get to more utility classes. 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.
Define CSS classes by adding prefixes
In Tailwind, we can define most CSS pseudo-classes by adding prefixes to other Tailwind utilities. If we want an anchor tag to have an underline when we hover the mouse over it, we can use the following command:
<a class="hover:underline">Keep your face to the sunshine.</a>
That’s compact, reasonably straightforward to read, and defined along with the HTML, so ...