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.

Practice

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

easy

A. Applies styles only when an element is disabled

B. Applies styles only when an element is hovered

C. Applies styles only when an element is clicked

D. Applies styles only when an element is focused

Solution

1. Step 1: Understand the focus variant purpose

   The focus: variant applies styles when an element receives keyboard or mouse focus, helping users identify the active element.

2. Step 2: Compare with other states

   Hover applies on mouse hover, click is not a Tailwind variant, and disabled is a different state. Only focus matches the description.

3. Final Answer:

   Applies styles only when an element is focused -> Option D

4. Quick Check:

   focus: = styles on focus [OK]

Hint: Focus variant styles appear only when element is focused [OK]

Common Mistakes:

• Confusing focus with hover
• Thinking focus applies on click
• Mixing focus with disabled state

2. Which of the following is the correct Tailwind syntax to change text color to blue only when an input is focused?

easy

A. focus:text-blue-500

B. text-blue-500:focus

C. focus_text-blue-500

D. text-blue-500-focus

Solution

1. Step 1: Recall Tailwind variant syntax

   Tailwind uses the format variant:utility, so focus variant is focus: before the utility class.

2. Step 2: Identify correct option

   Only focus:text-blue-500 matches the correct syntax. Others misuse colons or underscores.

3. Final Answer:

   focus:text-blue-500 -> Option A

4. Quick Check:

   Variant prefix + colon + utility = correct [OK]

Hint: Use focus: prefix before utility class [OK]

Common Mistakes:

• Placing :focus after utility
• Using underscores instead of colon
• Appending -focus to utility class

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

<button class="text-gray-700 focus:text-red-600">Click me</button>

medium

A. Red when focused, gray when not focused

B. Always red

C. Gray when focused, red when not focused

D. Always gray

Solution

1. Step 1: Understand base and focus styles

   The button has base text color text-gray-700 and changes to text-red-600 only on focus.

2. Step 2: Determine color on focus and blur

   When focused, focus:text-red-600 overrides base gray color. When not focused, base gray applies.

3. Final Answer:

   Red when focused, gray when not focused -> Option A

4. Quick Check:

   focus: overrides base style on focus [OK]

Hint: Focus styles override base only when focused [OK]

Common Mistakes:

• Thinking focus styles apply always
• Confusing base and focus colors
• Assuming no color change on focus

4. Identify the error in this Tailwind class usage to add a blue border on focus:

<input class="border focus-border-blue-500" />

medium

A. Border cannot change color on focus

B. Wrong utility name 'border-blue-500'

C. Missing colon after focus

D. Focus variant cannot be used on inputs

Solution

1. Step 1: Check variant syntax

   The focus variant requires a colon after it, like focus:border-blue-500. The code uses focus-border-blue-500 which is invalid.

2. Step 2: Verify utility and element support

   border-blue-500 is a valid utility and inputs support focus styles, so no issues there.

3. Final Answer:

   Missing colon after focus -> Option C

4. Quick Check:

   Variant must have colon separator [OK]

Hint: Always use colon after variant like focus: [OK]

Common Mistakes:

• Omitting colon after focus
• Using dash instead of colon
• Assuming inputs can't have focus styles

5. You want a button to have a green background normally, but change to yellow background only when focused and also have a black border only on focus. Which Tailwind classes should you use?

hard

A. bg-green-500 bg-yellow-400 focus:border-black border

B. bg-green-500 focus:bg-yellow-400 border focus:border-black

C. bg-green-500 focus:bg-yellow-400 border-black focus:border

D. bg-green-500 focus:bg-yellow-400 focus:border-black border

Solution

1. Step 1: Set base styles

   Use bg-green-500 for normal background and border to set border width (default border color).

2. Step 2: Apply focus variants correctly

   Use focus:bg-yellow-400 to change background on focus and focus:border-black to change border color to black only on focus.

3. Step 3: Verify option correctness

   bg-green-500 focus:bg-yellow-400 border focus:border-black correctly uses base green background and border, and changes background and border color on focus. Others misuse border color or width.

4. Final Answer:

   bg-green-500 focus:bg-yellow-400 border focus:border-black -> Option B

5. Quick Check:

   Base border + focus:border-black = black border only on focus [OK]

Hint: Use base classes plus focus: variant for focus styles [OK]

Common Mistakes:

• Adding base 'border-black' (always black border)
• Missing base 'border' width
• Forgetting 'focus:border-black' color