TW Elements - TailwindCSS Hover state. Free UI/UX design course

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 in regular CSS

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

CSS

#rectangle {
  background-color: blue;
}
#rectangle:hover {
  background-color: red;
}

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

HTML

<div id="rectangle">Hover me</div>

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 behaviour or style.

HTML

<div class="bg-blue-500 hover:bg-red-500">Hover me</div>

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.

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.

HTML

<div
  class="bg-blue-500 p-5 text-white hover:bg-red-500 hover:p-7 hover:text-green-500">
  Hover me
</div>

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:

HTML

<a
  class="text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400"
  href="#"
  data-twe-nav-link-ref
  >Dashboard</a
>

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.