Tailwind CSS Course
Tailwind CSS
/
Intermediate

Active State

Definition

A state variant (`active:`) that applies a utility class for the exact millisecond the element is actively being pressed down by a mouse click or finger tap.

Explain Like I'm New

The 'Click Down' state. When you physically press a button, it should visually 'squish' or darken slightly to give you tactile feedback that the click registered.

Real World Example

Scaling a button down to 95% size (`active:scale-95`) exactly when the user clicks it, making it feel like a physical, mechanical button.

Common Use Cases

  • •Tactile button feedback
  • •Touch screen feedback

Interactive Example

 Interview Questions
basic
  • What is the chronological difference between `hover`, `active`, and `focus` on a button?
intermediate
  • If you apply `active:bg-red-500` to a `div`, will it turn red if you click and hold your mouse down on it?
Flash Cards
Question
Chronology?
Click to reveal answer
Answer
1. `hover`: Mouse moves over it. 2. `active`: Mouse clicks DOWN. 3. `focus`: Mouse clicks UP (or button is tabbed to). The button remains in the `focus` state until you click somewhere else.
Question
Click and hold?
Click to reveal answer
Answer
Yes! The `active:` state persists for exactly as long as the mouse button or touchscreen is physically held down.