Active variant in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the active variant in Tailwind CSS?

The active variant in Tailwind CSS applies styles when an element is being clicked or pressed by the user, like a button being held down.

beginner

How do you write a Tailwind class to change background color when a button is active?

Use the active: prefix before the class. For example, active:bg-blue-700 changes the background to blue when the button is pressed.

beginner

Why is the active variant useful in web design?

It gives users feedback that their click is recognized by changing the element's style while pressing, improving user experience and accessibility.

intermediate

Can the active variant be combined with other variants in Tailwind CSS?

Yes! You can combine active with others like hover or focus to style elements differently for each interaction state.

beginner

Example: What does this class do? <code>active:scale-95</code>

It makes the element slightly smaller (scaled to 95%) while it is being pressed, giving a subtle 'pressed' effect.

What does the Tailwind class active:bg-red-500 do?

A Changes background to red when the element is focused

B Changes background to red when the mouse hovers

C Changes background to red when the element is clicked

D Changes background to red all the time

The active: prefix applies styles only while the element is being clicked or pressed.

Which user action triggers the active variant styles?

A Hovering over the element

B Double-clicking the element

C Focusing the element with keyboard

D Clicking and holding the element

The active variant applies styles when the user clicks and holds the element.

Can you combine active: with hover: in Tailwind CSS?

A Yes, you can combine them for different states

B No, only one variant can be used at a time

C Only if you use custom CSS

D Only on buttons

Tailwind allows combining variants like hover: and active: to style different interaction states.

What visual effect does active:scale-95 create?

A Makes the element bigger when active

B Makes the element smaller when active

C Changes the element's color when active

D Rotates the element when active

Scaling to 95% shrinks the element slightly while it is active (pressed).

Why should you use the active variant on buttons?

A To improve user feedback during clicks

B To make buttons bigger permanently

C To disable buttons

D To change button text

Using active gives users visual feedback that their click is recognized.

Explain how the active variant works in Tailwind CSS and why it is important for user experience.

Think about how buttons feel when you press them.

Describe how you would combine active with other variants like hover and focus in Tailwind CSS.

Consider how buttons change on hover, focus, and active states.