Focus variant in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Identify the correct Tailwind focus variant usage

Which option correctly applies a blue border only when the input is focused using Tailwind CSS?

Tailwind

<input type="text" class="border-2 rounded" aria-label="Name input">

A class="border-2 rounded focus:border-blue-500"

B class="border-2 rounded hover:border-blue-500"

C class="border-2 rounded active:border-blue-500"

D class="border-2 rounded visited:border-blue-500"

💡 Hint

Focus variant styles apply when an element is selected or active for keyboard input.

The focus variant in Tailwind is used with the prefix 'focus:' to style elements only when they have keyboard or mouse focus. Option A correctly uses 'focus:border-blue-500' to add a blue border on focus.

❓ rendering

intermediate

Visual effect of focus variant on a button

What visual change will you see when you tab to this button with the given Tailwind classes?

Tailwind

<button class="bg-gray-200 focus:bg-green-400 focus:outline-none focus:ring-4 focus:ring-green-300 rounded px-4 py-2" aria-label="Submit button">Submit</button>

A Button background changes to gray, a red ring appears, and default outline remains.

B Button background stays gray, no ring appears, but default outline is shown.

C Button background changes to green, a green ring appears around it, and no default outline is shown.

D Button background changes to green, but no ring or outline changes occur.

💡 Hint

Focus variants can change background, outline, and add ring effects for accessibility.

The focus variant changes the background to green-400, removes the default outline with 'focus:outline-none', and adds a green ring with 'focus:ring-4 focus:ring-green-300'. This creates a clear visible focus style.

🧠 Conceptual

advanced

Understanding focus variant and accessibility

Why is it important to use focus variants like 'focus:ring' or 'focus:outline' in Tailwind CSS for interactive elements?

A They automatically submit forms when elements receive focus.

B They provide visible focus indicators for keyboard users, improving accessibility.

C They make elements invisible when focused to reduce distractions.

D They disable mouse clicks on focused elements to prevent errors.

💡 Hint

Think about users who navigate websites without a mouse.

Focus variants create visible outlines or rings that help keyboard and assistive technology users know which element is active. This is essential for accessibility compliance and good user experience.

📝 Syntax

advanced

Identify the invalid Tailwind focus variant usage

Which option contains an incorrect Tailwind focus variant syntax that will cause the style not to apply?

A class="focus:bg-red500"

B class="focus:bg-red-500"

C class="focus:outline-none"

D class="focus:ring-2 focus:ring-blue-300"

💡 Hint

Tailwind color classes require a dash between color name and number.

Option A uses 'focus:bg-red500' missing the dash between 'red' and '500', which is invalid in Tailwind and will not apply the style. The correct syntax is 'focus:bg-red-500'.

❓ accessibility

expert

Ensuring keyboard accessibility with focus variants

You have a custom styled button with no visible focus styles. Which Tailwind classes should you add to ensure it meets accessibility guidelines for keyboard users?

A Add 'visited:text-indigo-600' to change text color after clicking.

B Add 'hover:bg-indigo-500 active:bg-indigo-700' to change colors on mouse events.

C Add 'disabled:opacity-50' to make the button look disabled when not clickable.

D Add 'focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-indigo-500' to show a clear ring on focus.

💡 Hint

Focus styles must be visible and distinct for keyboard navigation.

Option D adds a visible focus ring with offset and color, while removing default outline for a clean look. This ensures keyboard users can see which element is focused, meeting accessibility standards.