Hover, focus and active states

State variants

Tailwind lets you prefix utilities with variants such as hover:, focus:, focus-visible:, active: and visited:. The same base utility can therefore behave differently in different interaction states.

Prefer focus-visible for keyboard focus styling

focus-visible: is often a better default for custom keyboard focus indicators because it avoids unnecessarily showing a strong focus treatment for every pointer interaction.

Do not rely on hover alone

Hover is unavailable on many touch devices. Important information and actions must remain accessible without hover.