Similar to our responsive prefixes, Tailwind makes it easy to style elements on hover, focus, and more using state prefixes.

Hover

Add the hover: prefix to only apply a utility on hover.

By default, hover variants are only generated for background color, border color, font weight, shadow, text color, and text style utilities.

You can customize this in the modules section of your configuration file.

Focus

Add the focus: prefix to only apply a utility on focus.

By default, focus variants are only generated for background color, border color, font weight, outline, shadow, text color, and text style utilities.

You can customize this in the modules section of your configuration file.

Active

Add the active: prefix to only apply a utility when an element is active.

By default, active variants are not generated for any utilities.

You can customize this in the modules section of your configuration file.

Group Hover

If you need to style a child element when hovering over a specific parent element, add the .group class to the parent element and add the group-hover: prefix to the utility on the child element.

By default, group hover variants are not generated for any utilities.

You can customize this in the modules section of your configuration file.

Focus-Within

Add the focus-within: prefix to only apply a utility when a child element has focus.

By default, focus-within variants are not generated for any utilities.

You can customize this in the modules section of your configuration file.

Responsive Prefixes

State variants are also responsive, meaning you can change an element’s hover style for example at different breakpoints.

To apply a state variant responsively, add the responsive prefix first, before the state prefix.

<button class="... md:bg-orange md:hover:bg-red ...">Button</button>

Custom Utilities

You can generate state variants for your own custom utilities using the @variants directive:

// Input:
@variants hover, focus {
  .banana {
    color: yellow;
  }
}
// Output:
.banana {
  color: yellow;
}
.focus\:banana:focus {
  color: yellow;
}
.hover\:banana:hover {
  color: yellow;
}

For more information, see the @variants directive documentation.