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.
Learn the concepts, fix things with confidence, and ship real products with AI beside you. No coding background required, and we're with you from the first idea to launch.
Free to start. No card. Leave whenever you want.