Active variant in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a red background when the button is active.

Tailwind

<button class="bg-blue-500 [1]:bg-red-500 text-white px-4 py-2 rounded">Click me</button>

Drag options to blanks, or click blank then click option'

Aactive

Bdisabled

Cfocus

Dhover

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' instead of 'active' will change color only when hovering, not pressing.

Using 'focus' changes color when the button is focused, not pressed.

The active variant applies styles when the button is being clicked or pressed.

2fill in blank

medium

Complete the code to make the text bold only when the link is active (clicked).

Tailwind

<a href="#" class="text-gray-700 [1]:font-bold">Link</a>

Drag options to blanks, or click blank then click option'

Aactive

Bhover

Cfocus

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'visited' applies styles after the link is clicked and visited, not during the click.

Using 'hover' applies styles when the mouse is over the link, not when clicking.

The active variant applies styles while the link is being clicked.

3fill in blank

hard

Fix the error in the code to apply a green border when the input is active (clicked or focused).

Tailwind

<input type="text" class="border-2 border-gray-300 [1]:border-green-500" />

Drag options to blanks, or click blank then click option'

Aactive

Bhover

Cchecked

Dfocus

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'active' on inputs does not reliably apply styles when focused.

Using 'checked' applies only to checkboxes or radios, not text inputs.

The focus variant applies styles when the input is focused (clicked or tabbed into). The active variant does not apply to inputs in the same way.

4fill in blank

hard

Fill both blanks to apply a blue background on hover and a red background when active.

Tailwind

<button class="[1]:bg-blue-500 [2]:bg-red-500 text-white px-4 py-2 rounded">Press me</button>

Drag options to blanks, or click blank then click option'

Ahover

Bactive

Cfocus

Ddisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the variants will cause the colors to appear at wrong times.

Using 'focus' instead of 'active' changes color on keyboard focus, not press.

hover applies styles when the mouse is over the button, and active applies styles when the button is pressed.

5fill in blank

hard

Fill all three blanks to apply uppercase text on hover, bold text when active, and underline on focus.

Tailwind

<a href="#" class="[1]:uppercase [2]:font-bold [3]:underline">Link</a>

Drag options to blanks, or click blank then click option'

Ahover

Bactive

Cfocus

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'visited' with 'focus' or 'active' causes styles to appear at wrong times.

Using 'active' for underline instead of 'focus' changes style only while clicking.

hover applies uppercase on mouse over, active applies bold while clicking, and focus applies underline when the link is focused.

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