Style Elements on hover and focus with Tailwind’s State Variants

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

In this lesson, we learn how to target specific states of elements and apply styles only when those states are triggered.

Instructor: [00:00] Let's take a text link and a button. These look nice, but we should apply different styles on hover. In Tailwind, you can target hover states with the hover prefix followed by a colon. On hover, we want the text to be orange.

[00:16] Let's do the same with the button. On hover, we want the button background to be black. Here we go. Let's style the focus state for our text link now. Let's give that a try. When I click on the link, the focus state styles are applied. When I click out, they are removed.

Cory Kleiser
Cory Kleiser
~ 4 years ago

focus is not enabled by default in modules