The
active:
state is very brief, only applying styles while an element is being pressed.
It's often confused with the
focus:
state, which persists after a click until another element gains focus.
-
Press & Hold:
active:bg-indigo-800 active:scale-95
.
-
Release:
active:
styles vanish.
focus:bg-indigo-700 focus:ring-4
styles appear and persist.
-
Press & Hold:
active:bg-teal-700 active:scale-95
.
-
Release:
active:
styles vanish. Standard focus ring appears if not styled otherwise.
Click "Button A", then click "Button B" or the input field above. Notice how the
focus:
styles on "Button A" disappear when it loses focus,
while its
active:
styles were only visible during the press.