State variants in Tailwind CSS allow you to apply utility classes conditionally based on the state of an element. This includes hover, focus, active, disabled, and many other states.

State variants use the format state:utility where state can be hover, focus, active, disabled, and utility is any Tailwind utility class.

The hover state applies styles when the user hovers over an element. This is commonly used for buttons, links, and interactive elements.

The focus state applies styles when an element has focus. This is crucial for accessibility and is commonly used with form elements and interactive components.

The active state applies styles when an element is being activated (clicked). This provides visual feedback during user interaction.

The disabled state applies styles to disabled form elements. This helps communicate that an element is not interactive.

Combine state variants with responsive prefixes to create different behaviors on different screen sizes.

The group-hover variant allows you to style child elements when the parent element is hovered. This is useful for card components and complex interactions.

The focus-within variant applies styles to a parent element when any child element has focus. This is useful for form containers.

Tailwind provides states for form validation including required and invalid states. These help with form UX and validation feedback.

Use checked and indeterminate states for checkboxes and radio buttons to provide visual feedback for selection states.

The motion-reduce variant respects user preferences for reduced motion. This is important for accessibility and users with vestibular disorders.

You can combine multiple state variants to create complex interactions. Stack state prefixes for sophisticated behaviors.