Skip to main content

Hover, focus and other states

Special attributes can be added to all classes to modify their behavior.

Now we will see some of those that are available

Hover​

With the :hover modifier we can change the properties when the user hover as shown below:

<div class="... bg-primary hover:bg-red"></div>

Focus​

With the :focus modifier we can change the properties when the user focus a button

<div class="... bg-primary focus:bg-red"></div>

Active​

With the :active modifier we can change the properties when the user a active a button.

<div class="... bg-primary active:bg-red"></div>

Visited​

With the :visited modifier we can change the properties when the user visit some link.

Button
<a class="... visited:bg-red"></a>