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.

Practice

1. What does the active: variant in Tailwind CSS do?

easy

A. Applies styles only while the element is being clicked or pressed

B. Applies styles when the element is hovered over

C. Applies styles when the element is focused via keyboard

D. Applies styles permanently after the element is clicked once

Solution

1. Step 1: Understand the active: variant purpose

   The active: variant targets the moment an element is clicked or pressed, giving immediate feedback.

2. Step 2: Compare with other states

   Hover applies on mouse over, focus applies on keyboard focus, and permanent styles are not related to active:.

3. Final Answer:

   Applies styles only while the element is being clicked or pressed -> Option A

4. Quick Check:

   active: = clicked/pressed state [OK]

Hint: Remember active means 'pressed down' state only [OK]

Common Mistakes:

• Confusing active with hover or focus states
• Thinking active styles stay after click
• Using active for keyboard focus feedback

2. Which of these is the correct way to apply a red background only while a button is pressed using Tailwind's active variant?

easy

A. <button class='hover:bg-red-700 active:bg-red-500'>Click me</button>

B. <button class='bg-red-500 active:bg-red-700'>Click me</button>

C. <button class='active:bg-red-500 bg-red-700'>Click me</button>

D. <button class='bg-red-700 active:bg-red-700'>Click me</button>

Solution

1. Step 1: Identify base and active styles

   The base background is bg-red-500, and the active state changes it to bg-red-700.

2. Step 2: Check class order and correctness

   <button class='bg-red-500 active:bg-red-700'>Click me</button> correctly sets the base and active variant. Other options either reverse colors or misuse classes.

3. Final Answer:

   <button class='bg-red-500 active:bg-red-700'>Click me</button> -> Option B

4. Quick Check:

   Base color then active variant = <button class='bg-red-500 active:bg-red-700'>Click me</button> [OK]

Hint: Base style first, then active:variant for pressed effect [OK]

Common Mistakes:

• Swapping base and active colors
• Using active without base style
• Confusing hover and active variants

3. Given this button code:

<button class='bg-blue-400 active:bg-blue-600 text-white px-4 py-2 rounded'>Press</button>

What background color will the button have while it is being clicked?

medium

A. bg-white

B. bg-blue-400

C. bg-blue-600

D. No background color

Solution

1. Step 1: Identify base and active background classes

   The base background is bg-blue-400. The active variant changes it to bg-blue-600 when pressed.

2. Step 2: Determine background during active state

   While clicking, the active:bg-blue-600 applies, overriding the base color.

3. Final Answer:

   bg-blue-600 -> Option C

4. Quick Check:

   Active variant overrides base color when pressed [OK]

Hint: Active variant color overrides base on press [OK]

Common Mistakes:

• Choosing base color instead of active
• Confusing text color with background
• Ignoring active variant effect

4. This button code is intended to change background color when pressed, but it doesn't work:

<button class='bg-green-500 active-bg-green-700 text-white'>Click</button>

What is the error?

medium

A. The button tag cannot use active variant

B. The base color bg-green-500 is missing

C. The text color text-white conflicts with active variant

D. The active variant syntax is incorrect; it should be active:bg-green-700

Solution

1. Step 1: Check active variant syntax

   The correct syntax uses a colon: active:bg-green-700. The code uses a dash instead, which is invalid.

2. Step 2: Verify other classes

   Base color and text color are correct. Button supports active variant.

3. Final Answer:

   The active variant syntax is incorrect; it should be active:bg-green-700 -> Option D

4. Quick Check:

   Use colon for variants like active: [OK]

Hint: Variants use colon, not dash (active:bg-color) [OK]

Common Mistakes:

• Using dash instead of colon for variants
• Assuming text color affects active variant
• Thinking button can't have active styles

5. You want a link that changes text color to purple only while pressed, and smoothly transitions back after release. Which Tailwind classes achieve this?

hard

A. <a href='#' class='text-gray-800 active:text-purple-600 transition-colors duration-300'>Link</a>

B. <a href='#' class='text-gray-800 hover:text-purple-600 transition duration-300'>Link</a>

C. <a href='#' class='text-purple-600 active:text-gray-800 transition-colors duration-300'>Link</a>

D. <a href='#' class='text-gray-800 active:text-purple-600 duration-300'>Link</a>

Solution

1. Step 1: Identify active text color change

   The link should have base text color text-gray-800 and change to text-purple-600 only when pressed, so active:text-purple-600 is correct.

2. Step 2: Add smooth transition for color changes

   Use transition-colors and duration-300 for smooth color transitions on press and release.

3. Final Answer:

   <a href='#' class='text-gray-800 active:text-purple-600 transition-colors duration-300'>Link</a> -> Option A

4. Quick Check:

   Active variant + transition-colors + duration = <a href='#' class='text-gray-800 active:text-purple-600 transition-colors duration-300'>Link</a> [OK]

Hint: Use active: for press + transition-colors for smooth effect [OK]

Common Mistakes:

• Using hover instead of active for press effect
• Missing transition-colors for smooth change
• Reversing base and active colors