A visual condition of an element based on user interaction — like hover, focus, active, or disabled.
CSS states (also called pseudo-class states) describe the current condition of an element based on user interaction. The most common CSS states are :hover (mouse is over it), :focus (it is selected, like a clicked input), :active (being clicked right now), and :disabled (cannot be interacted with).
In Tailwind CSS, you apply state-based styles with prefixes like hover:bg-blue-600, focus:ring-2, or disabled:opacity-50. These styles only activate when the element enters that state.
Not to be confused with React state (data stored in a Component using useState). CSS states are purely visual conditions controlled by the browser, while React state is application data that triggers re-renders.
We give you the skills to build, deploy, and own a full product. Professional stack, AI co-pilot, no coding background required.