Applies while the pointer is over the element.

Example#

html
<button class="bg-blue-500 hover:bg-blue-600 transition">Save</button>

Stacking#

Prefix order is screens → variants → utility. These variants combine with every screen (xxs: xs: sm: md:…) and with each other.

Best practices#

  • Combine with transition for smoothness
  • group-hover styles children when the PARENT is hovered — see variants/group|group

Common mistakes#

  • Hover-only affordances hide functionality from touch and keyboard users — always pair with focus/visible states

variants/index|Variants hub · responsive/index|Responsive · utilities/index|Utilities