Why interactive states need styling in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a hover effect that changes the button background color.

Tailwind

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

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

Afocus

Bhover

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'focus' instead of 'hover' for mouse hover effect.

Using 'active' which applies only when clicking, not hovering.

The hover state applies styles when the mouse pointer is over the button, making it interactive and clear to users.

2fill in blank

medium

Complete the code to add a focus ring around the input field for accessibility.

Tailwind

<input type="text" class="border rounded py-2 px-3 [1]:ring-2 [1]:ring-blue-500" aria-label="Name input">

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

Afocus

Bhover

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' instead of 'focus' for keyboard accessibility.

Not adding any focus styles, making keyboard navigation hard.

The focus state is important for keyboard users to see which element is active. Tailwind uses focus: prefix to style this state.

3fill in blank

hard

Fix the error in the button code to apply the active state background color correctly.

Tailwind

<button class="bg-green-500 text-white py-2 px-4 rounded [1]:bg-green-700">Submit</button>

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

Ahover

Bvisited

Cfocus

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' which applies on mouse over, not click.

Using 'focus' which applies on keyboard focus, not click.

The active state applies styles when the button is being clicked. Tailwind uses active: prefix for this.

4fill in blank

hard

Fill both blanks to style a link with underline on hover and change text color on focus.

Tailwind

<a href="#" class="text-blue-600 [1]:underline [2]:text-blue-800">Learn more</a>

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

Ahover

Bfocus

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up hover and focus states.

Not adding focus styles, hurting accessibility.

Hover adds underline when mouse is over the link. Focus changes text color when keyboard users select the link.

5fill in blank

hard

Fill all three blanks to style a button with shadow on hover, scale on active, and outline on focus.

Tailwind

<button class="bg-purple-600 text-white py-2 px-5 rounded transition [1]:shadow-lg [2]:scale-95 [3]:outline-none [3]:ring-4 [3]:ring-purple-300">Press me</button>

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

Ahover

Bactive

Cfocus

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing active and hover states.

Forgetting focus styles, making keyboard navigation hard.

Using visited state which doesn't apply to buttons.

Hover adds a shadow for a lifted look. Active scales the button smaller when pressed. Focus adds a visible ring outline for keyboard users.

Practice

1. Why is it important to style interactive states like hover and focus in Tailwind CSS?

easy

A. They help users understand which elements are clickable or focusable.

B. They make the page load faster.

C. They reduce the file size of CSS.

D. They automatically fix broken links.

Solution

1. Step 1: Understand the role of interactive states

   Interactive states like hover and focus visually indicate to users which elements can be interacted with.

2. Step 2: Connect this to user experience

   Styling these states improves usability and accessibility by guiding user actions.

3. Final Answer:

   They help users understand which elements are clickable or focusable. -> Option A

4. Quick Check:

   Interactive states improve usability = A [OK]

Hint: Interactive styles show users what they can click or type [OK]

Common Mistakes:

• Thinking interactive states speed up page loading
• Confusing interactive styling with CSS file size
• Believing interactive states fix broken links

2. Which Tailwind CSS syntax correctly applies a blue background on hover to a button?

easy

A. bg-blue-700 hover:bg-blue-500

B. hover-bg-blue-700 bg-blue-500

C. bg-blue-500 hover:bg-blue-700

D. bg-blue-500 :hover:bg-blue-700

Solution

1. Step 1: Identify correct Tailwind hover syntax

   Tailwind uses the prefix hover: before the utility class to apply styles on hover.

2. Step 2: Check each option

   bg-blue-500 hover:bg-blue-700 uses hover:bg-blue-700 correctly. Others misuse syntax or order.

3. Final Answer:

   <code>bg-blue-500 hover:bg-blue-700</code> -> Option C

4. Quick Check:

   Correct hover prefix = A [OK]

Hint: Use hover: prefix before utility class for hover styles [OK]

Common Mistakes:

• Using dash instead of colon in hover prefix
• Placing hover class before base class incorrectly
• Adding colons inside class names

3. What will be the background color of this button when focused?

<button class="bg-gray-300 focus:bg-green-500">Click me</button>

medium

A. Green background

B. Blue background

C. No background color

D. Gray background

Solution

1. Step 1: Understand the focus state styling

   The class focus:bg-green-500 changes the background to green when the button is focused.

2. Step 2: Determine the background color on focus

   When focused, the green background overrides the gray base background.

3. Final Answer:

   Green background -> Option A

4. Quick Check:

   Focus state changes background to green = D [OK]

Hint: Focus styles override base styles when element is focused [OK]

Common Mistakes:

• Thinking base background stays on focus
• Confusing hover and focus states
• Ignoring the focus prefix effect

4. This button does not change color on hover. What is the error?

<button class="bg-red-400 hover-bg-red-600">Submit</button>

medium

A. The base color bg-red-400 is incorrect.

B. The hover class should be hover:bg-red-600 with a colon.

C. The button tag must be <a> for hover to work.

D. Hover styles only work on links, not buttons.

Solution

1. Step 1: Identify the hover syntax error

   The class hover-bg-red-600 is invalid because Tailwind requires a colon after hover.

2. Step 2: Correct the syntax

   Changing it to hover:bg-red-600 fixes the hover styling.

3. Final Answer:

   The hover class should be hover:bg-red-600 with a colon. -> Option B

4. Quick Check:

   Hover prefix needs colon = B [OK]

Hint: Hover prefix must have colon, not dash [OK]

Common Mistakes:

• Using dash instead of colon in hover prefix
• Thinking hover only works on links
• Changing base color instead of fixing syntax

5. You want a button to have a gray background normally, turn blue on hover, and show a thick yellow outline when focused for accessibility. Which Tailwind classes achieve this?

hard

A. bg-gray-400 hover:bg-blue-600 focus:outline-yellow-400 focus:outline-0 focus:outline

B. bg-gray-400 hover:bg-blue-600 focus:bg-yellow-400 focus:outline-4

C. bg-gray-400 hover:bg-blue-600 focus:outline focus:outline-yellow-400 focus:outline-0

D. bg-gray-400 hover:bg-blue-600 focus:outline-4 focus:outline-yellow-400

Solution

1. Step 1: Identify required focus outline classes

   Tailwind uses focus:outline-4 for thick (4px) outline and focus:outline-yellow-400 for yellow color on focus.

2. Step 2: Check each option for correct order and completeness

   bg-gray-400 hover:bg-blue-600 focus:outline-4 focus:outline-yellow-400 includes the correct utility classes. Others use invalid syntax, wrong utilities, or zero width.

3. Final Answer:

   <code>bg-gray-400 hover:bg-blue-600 focus:outline-4 focus:outline-yellow-400</code> -> Option D

4. Quick Check:

   focus:outline-4 + focus:outline-yellow-400 = D [OK]

Hint: Add focus:outline before color and width for focus outlines [OK]

Common Mistakes:

• Omitting focus:outline class
• Placing outline color before enabling outline
• Using incorrect class order