🏠

Tailwind CSS Concept Explained

Making Things Interactive & Respond to Users

Change how something looks when it's being clicked.

Skill ID: Interactive_37

Description: Give visual feedback when a user presses down on an element.

Where to apply: Buttons, clickable links.

Key Tailwind Classes:

active:bg-blue-800 , active:scale-95

Gotcha: The active: state is very brief (only while the mouse button is down or element is tapped). It's sometimes confused with the focus: state, which persists after clicking until something else is focused.

Example:

Hover over and click the button below to see the active: state in action. It will turn darker blue and slightly shrink while you are pressing the mouse button down.

Relevant classes on the button: bg-blue-500 , hover:bg-blue-600 , active:bg-blue-800 , active:scale-95 .

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7:

🏠