Hover, Focus, & Other States

Using utilities to style elements on hover, focus, and more


# Overview

Similar to how Elements handles , styling elements on hover, focus, and more can be accomplished by prefixing utilities with the appropriate pseudo-class.

<form>
<input class="bg-gray-200 hover:bg-white hover:border-gray-300 focus:outline-none focus:bg-white focus:shadow-outline focus:border-gray-300 ...">
<button class="bg-primary hover:bg-primary-dark focus:outline-none focus:shadow-outline ...">
Sign Up
</button>
</form>

For a complete list of which variants are enabled by default, see the reference table at the end of this page.

Elements includes first-class support for styling elements on hover, focus, active, disabled, visited, first-child, last-child, odd-child, even-child, group-hover, group-focus, and focus-within.

If you need to target a pseudo-class that Elements doesn’t support, you can extend the supported variants by writing a custom variants or you can make a request for variant support to be added in a future release.


# Hover

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

<button class="bg-transparent hover:bg-primary text-primary hover:text-white...">
Hover me
</button>

# Focus

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

<input class="bg-gray-200 focus:bg-white border-transparent focus:border-info ..." placeholder="Focus me">

# Active

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

<button class="bg-primary active:bg-primary-dark text-white...">
Click me
</button>

# Disabled

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

<button class="disabled:opacity-75 bg-primary...">
Submit
</button>

<button disabled class="disabled:opacity-75 bg-primary...">
Submit
</button>

# Visited

Add the visited: prefix to only apply a utility when a link has been visited.

<a href="#" class="text-blue-500 visited:text-violet-500 ...">Link</a>

# First-child

Add the first: prefix to only apply a utility when it is the first-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
<div class="border rounded">
<div v-for="item in items" class="border-t first:border-t-0">
@{{item}}
</div>
</div>

It’s important to note that you should add any first: utilities to the child element, not the parent element.

# Last-child

Add the last: prefix to only apply a utility when it is the last-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
<div class="border rounded">
<div v-for="item in items" class="border-b last:border-b-0">
@{{item}}
</div>
</div>

It’s important to note that you should add any last: utilities to the child element, not the parent element.

# Odd-child

Add the odd: prefix to only apply a utility when it is an odd-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
<div class="border rounded">
<div v-for="item in items" class="bg-white odd:bg-gray-200">
@{{item}}
</div>
</div>

It’s important to note that you should add any odd: utilities to the child element, not the parent element.

# Even-child

Add the even: prefix to only apply a utility when it is an even-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

One
Two
Three
<div class="border rounded">
<div v-for="item in items" class="bg-white even:bg-gray-200">
@{{item}}
</div>
</div>

It’s important to note that you should add any even: utilities to the child element, not the parent element.

# 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-primary ...">
<p class="text-gray-900 group-hover:text-white ...">New Project</p>
<p class="text-gray-700 group-hover:text-white ...">Create a new project from a variety of starting templates.</p>
</div>

# Group-focus

The group-focus variant works just like group-hover except for focus:

<button class="group text-gray-700 focus:text-gray-900 ...">
<svg class="h-6 w-6 text-gray-400 group-focus:text-gray-400"><!-- ... --></svg>
Submit
</button>

# Focus-within

Note that focus-within is not supported in IE or Edge < 79.

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

<form class="border-b-2 border-gray-400 focus-within:border-primary ...">
<input class="..." placeholder="Jane Doe" ...>
<button class="...">
Sign Up
</button>
</form>

# Combining with responsive prefixes

Pseudo-class variants are also responsive, meaning you can do things like change an element’s hover style at different breakpoints for example.

To apply a pseudo-class variant at a specific breakpoint, add the responsive prefix first, before the pseudo-class prefix:

<button class="squash-md rounded text-white font-medium none:bg-orange-400 none:hover:bg-orange-500 sm:bg-green-400 sm:hover:bg-green-500 md:bg-red-400 md:hover:bg-red-500 lg:bg-violet-400 lg:hover:bg-violet-500 xl:bg-pink-400 xl:hover:bg-pink-500 ">
Button
</button>

# Reference Table

PropertyVariants
accessibilityresponsive:, focus-within:, focus
align-contentresponsive
align-itemsresponsive
align-selfresponsive
animationresponsive
appearanceresponsive
backdrop-blurresponsive
backdrop-brightnessresponsive
backdrop-contrastresponsive
backdrop-drop-shadowresponsive
backdrop-filterresponsive
backdrop-grayscaleresponsive
backdrop-hue-rotateresponsive
backdrop-invertresponsive
backdrop-saturateresponsive
backdrop-sepiaresponsive
background-attachmentresponsive
background-blend-moderesponsive:, hover:, group-hover
background-clipresponsive
background-colorresponsive:, odd:, even:, first:, last:, hover:, focus:, active:, disabled:, focus-within:, group-focus:, group-hover:, group-disabled:, checked
background-imageresponsive:, hover:, focus:, active:, disabled:, focus-within:, group-focus:, group-hover:, checked
background-opacityresponsive:, odd:, even:, first:, last:, hover:, focus:, active:, disabled:, focus-within:, group-focus:, group-hover
background-positionresponsive
background-repeatresponsive
background-sizeresponsive:, hover:, focus:, group-hover
blurresponsive
border-collapseresponsive
border-colorresponsive:, odd:, even:, first:, last:, hover:, focus:, active:, disabled:, focus-within:, group-focus:, group-hover:, group-disabled
border-opacityresponsive:, odd:, even:, first:, last:, hover:, focus:, active:, disabled:, focus-within:, group-focus:, group-hover
border-radiusresponsive
border-styleresponsive
border-widthresponsive
box-decoration-breakresponsive
box-shadowresponsive:, hover:, focus:, disabled:, focus-within:, group-focus:, group-hover
box-sizingresponsive
brightnessresponsive
clearresponsive
containerresponsive
contrastresponsive
cursorresponsive
displayresponsive
divide-colorresponsive:, dark
divide-opacityresponsive:, dark
divide-styleresponsive
divide-widthresponsive
drop-shadowresponsive
fillresponsive
filterresponsive
flexresponsive
flex-directionresponsive
flex-growresponsive
flex-shrinkresponsive
flex-wrapresponsive
floatresponsive
font-familyresponsive
font-sizeresponsive
font-smoothingresponsive
font-styleresponsive
font-variant-numericresponsive
font-weightresponsive
gapresponsive
gradient-color-stopsresponsive:, hover:, focus:, group-hover
grayscaleresponsive
grid-auto-columnsresponsive
grid-auto-flowresponsive
grid-auto-rowsresponsive
grid-columnresponsive
grid-column-endresponsive
grid-column-startresponsive
grid-rowresponsive
grid-row-endresponsive
grid-row-startresponsive
grid-template-columnsresponsive
grid-template-rowsresponsive
heightresponsive
hue-rotateresponsive
insetresponsive:, hover:, group-hover
invertresponsive
isolationresponsive:, hover:, group-hover
justify-contentresponsive
justify-itemsresponsive
justify-selfresponsive
letter-spacingresponsive
line-heightresponsive
list-style-positionresponsive
list-style-typeresponsive
marginresponsive
max-heightresponsive
max-widthresponsive
min-heightresponsive
min-widthresponsive
mix-blend-moderesponsive:, hover:, group-hover
object-fitresponsive
object-positionresponsive
opacityresponsive:, hover:, focus:, disabled:, focus-within:, group-focus:, group-hover
orderresponsive
outlineresponsive:, focus-within:, focus
overflowresponsive
overscroll-behaviorresponsive
paddingresponsive
place-contentresponsive
place-itemsresponsive
place-selfresponsive
placeholder-colorresponsive:, dark:, focus
placeholder-opacityresponsive:, dark:, focus
pointer-eventsresponsive
positionresponsive
resizeresponsive
ring-colorresponsive:, dark:, focus-within:, focus
ring-offset-colorresponsive:, dark:, focus-within:, focus
ring-offset-widthresponsive:, focus-within:, focus
ring-opacityresponsive:, dark:, focus-within:, focus
ring-widthresponsive:, focus-within:, focus
rotateresponsive:, hover:, focus:, group-hover
saturateresponsive
scaleresponsive:, hover:, focus:, group-hover
sepiaresponsive
skewresponsive:, hover:, focus:, group-hover
spaceresponsive
strokeresponsive
stroke-widthresponsive
table-layoutresponsive
text-alignresponsive
text-colorresponsive:, odd:, even:, first:, last:, hover:, focus:, active:, disabled:, focus-within:, group-focus:, group-hover:, group-disabled:, visited
text-decorationresponsive:, group-hover:, focus-within:, hover:, focus
text-opacityresponsive:, odd:, even:, first:, last:, hover:, focus:, active:, disabled:, focus-within:, group-focus:, group-hover
text-overflowresponsive:, group-hover
text-transformresponsive
transformresponsive
transform-originresponsive
transition-delayresponsive
transition-durationresponsive
transition-propertyresponsive
transition-timing-functionresponsive
translateresponsive:, hover:, focus:, group-hover
user-selectresponsive
vertical-alignresponsive
visibilityresponsive
whitespaceresponsive
widthresponsive
word-breakresponsive:, group-hover
z-indexresponsive:, hover:, group-hover
triangle-sizeresponsive:, hover
text-shadowresponsive:, hover:, focus:, disabled:, focus-within:, group-focus:, group-hover
text-orientationresponsive
line-clampresponsive:, hover
maskresponsive:, hover
spacersresponsive
icon-sizeresponsive
aspect-ratioresponsive:, hover