Hover state

The thing where Tailwind CSS really shines is applying different CSS states, like hover, to our UI elements.

The hover state in Tailwind is used to apply styles to an element when the mouse pointer is over it. This is similar to the :hover pseudo-class in CSS.

Hover over the rectangle below and it will turn from blue to red.

Hover me

Hover in regular CSS

To achieve this effect in regular CSS, we would need to apply code like the following:

Of course we would also need to add the id #rectangle to the HTML element to specify where exactly our CSS should be applied.

Hover in Tailwind CSS

In Tailwind it's easier. We just need to add a modifier hover: to the beginning of the class name and then specify what should happen when the user hovers the element.

Note: Modifier is a keyword that you append to a utility class to alter its behavior or style.

As you can see in the above example, by default our element is blue (.bg-blue-500 class), but when we hover it, it changes to red (.bg-red-500 class).

hover: works like an "if".

It's simply a condition, which says "If the user hovers over this element, change the color to bg-red-500 " .

Using multiple classes

We are not limited to using only one class when we want to use hover:

We can use them as much as we want.

For example, let's assume that in addition to the background color, we also want to change the color of the text and padding of our element on the hover.

Hover me

To achieve this, we just need to add more hover: modifiers along with the next classes.

Note that each class has its own hover: modifier: We cannot add more than one class to one modifier.

Hover state in the Navbar

In the Navbar, which we finished in the previous lesson, we use the hover modifier a lot.

Hover over the links on the left or the icons on the right and you'll see them slightly change their color.

This is of course due to the use of the hover: modifier. If you look closely, you'll see that it's present in every link:

To sum up - using the hover state in Tailwind may seem strange at first, but it's actually very simple once you get used to it.

You've probably noticed other modifiers in the Navbar, such as focus: and disabled:. We'll cover them in the next lesson.

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.