Active variant in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What color will the button text be when clicked?

Consider this Tailwind CSS button:

<button class="text-black active:text-red-500">Click me</button>

What color will the button text have while the mouse button is held down on it?

Tailwind

<button class="text-black active:text-red-500">Click me</button>

A The text color changes to red while the button is pressed.

B The text color stays black even when the button is pressed.

C The text color changes to red only after the button is released.

D The text color changes to red when hovered, not when pressed.

💡 Hint

Think about what the active: variant does in Tailwind CSS.

The active: variant applies styles only while the element is being clicked (mouse button held down). So the text color changes to red during the press.

🧠 Conceptual

intermediate

When does the active: variant apply styles?

Choose the correct description of when Tailwind's active: variant styles are applied.

A While the element is being clicked (mouse button held down).

B When the element is focused by keyboard navigation.

C When the mouse pointer is hovering over the element.

D After the element has been clicked and released.

💡 Hint

Think about the difference between hover, focus, and active states.

The active: variant applies styles only during the time the mouse button is pressed down on the element, not before or after.

❓ rendering

advanced

What happens to the button background color on active state?

Given this button:

<button class="bg-blue-500 active:bg-green-500 text-white p-3 rounded">Press me</button>

What background color will the button show while it is being pressed?

Tailwind

<button class="bg-blue-500 active:bg-green-500 text-white p-3 rounded">Press me</button>

A The background color stays blue even when pressed.

B The background color changes to green while pressed.

C The background color changes to green only after releasing the button.

D The background color changes to blue on hover, not active.

💡 Hint

Remember how active: modifies styles during pressing.

The active:bg-green-500 class changes the background color to green only while the button is pressed.

❓ accessibility

advanced

Which is true about keyboard accessibility and active: styles?

Consider a button styled with Tailwind's active: variant. Which statement about keyboard users is correct?

A The <code>active:</code> styles apply only when the button is focused, not activated.

B The <code>active:</code> styles only apply on mouse clicks, not keyboard activation.

C Keyboard users never see <code>active:</code> styles because they only respond to hover.

D The <code>active:</code> styles apply when the button is activated via keyboard (e.g., space or enter).

💡 Hint

Think about how browsers handle :active state for keyboard activation.

Browsers apply the :active state when a button is activated by keyboard keys like space or enter, so active: styles appear for keyboard users too.

📝 Syntax

expert

Which Tailwind class correctly applies a red border only when the button is active?

Choose the correct Tailwind class to add a red border only while the button is pressed.

Tailwind

<button class="border-2 ???">Press me</button>

A border-red-500 active

B hover:border-red-500 active

C active:border-red-500

D active:border: red-500

💡 Hint

Remember the correct syntax for Tailwind variants.

The correct syntax is active:border-red-500. Other options have syntax errors or apply styles incorrectly.