State Variants
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.
<button class="bg-transparent hover:bg-blue text-blue-dark hover:text-white...">
Hover me
</button>
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.
<input class="bg-grey-lighter focus:bg-white border-transparent focus:border-blue-light ..." placeholder="Focus me">
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.
<button class="bg-blue active:bg-blue-dark text-white...">
Click me
</button>
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.
New Project
Create a new project from a variety of starting templates.
<div class="group bg-white hover:bg-blue ...">
<p class="text-black group-hover:text-white ...">New Project</p>
<p class="text-grey-darker group-hover:text-white ...">Create a new project from a variety of starting templates.</p>
</div>
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
Note that focus-within is not supported in IE or Edge.
Add the focus-within:
prefix to only apply a utility when a child element has focus.
<form class="border-b-2 border-grey-light focus-within:border-teal ...">
<input class="..." placeholder="Jane Doe" ...>
<button class="...">
Sign Up
</button>
</form>
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.