Add the 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 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.

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 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.

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 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.

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

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