Ring utilities for focus states in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class adds a blue ring on focus?

You want an element to show a blue ring when it receives keyboard focus. Which Tailwind class will do this?

Tailwind

<button class="focus:ring-4 focus:ring-blue-500">Click me</button>

A focus:ring-blue

B ring-blue-500

C focus:ring-4-blue

D focus:ring-blue-500

💡 Hint

Focus ring classes start with 'focus:ring-' followed by color and shade.

The correct class is focus:ring-blue-500. It applies a blue ring only when the element is focused. ring-blue-500 applies the ring always, not just on focus. The others are invalid class names.

🧠 Conceptual

intermediate

What does the Tailwind class focus:ring-offset-2 do?

You see a button with class focus:ring-offset-2. What effect does this class have when the button is focused?

Tailwind

<button class="focus:ring-2 focus:ring-offset-2">Submit</button>

A Sets the ring thickness to 2px on focus

B Removes the ring when the element is focused

C Adds a 2px space between the element and the ring on focus

D Changes the ring color to offset-2 on focus

💡 Hint

Think about what 'offset' means in spacing.

The focus:ring-offset-2 class adds a small space (2px) between the element's border and the ring when focused. It does not change ring thickness or color.

❓ rendering

advanced

What is the visible effect of this button's classes on focus?

Consider this button:

<button class="focus:outline-none focus:ring-4 focus:ring-green-400 focus:ring-offset-4 focus:ring-offset-white">Go</button>

What will you see when the button is focused?

Tailwind

<button class="focus:outline-none focus:ring-4 focus:ring-green-400 focus:ring-offset-4 focus:ring-offset-white">Go</button>

A A thin green ring with no space around the button on focus, default outline visible

B A thick green ring with a white space around the button on focus, no default outline

C No ring visible, only a white outline on focus

D A thick green ring with blue offset space on focus

💡 Hint

Remember what each class controls: outline, ring size, ring color, offset size, offset color.

The focus:outline-none removes the default browser outline. focus:ring-4 adds a thick ring. focus:ring-green-400 colors the ring green. focus:ring-offset-4 adds space between the button and ring. focus:ring-offset-white colors that space white. So you see a thick green ring with white space around the button on focus.

❓ accessibility

advanced

Why is using focus:ring utilities better than removing focus outlines?

Some developers remove focus outlines for style and add custom rings with Tailwind. Why is this approach better for accessibility?

A Because custom rings can be styled with good contrast and visible size, helping keyboard users see focus clearly

B Because focus rings prevent screen readers from reading content

C Because rings only show on mouse hover, improving mouse user experience

D Because removing outlines makes the page load faster

💡 Hint

Think about users who navigate with keyboards.

Removing focus outlines without replacement harms keyboard users who rely on visible focus indicators. Using focus:ring utilities allows custom, visible, and accessible focus styles that improve usability and meet accessibility standards.

📝 Syntax

expert

Which Tailwind class combination correctly applies a red ring with 3px offset on focus?

You want a red focus ring with thickness 3 and an offset space of 3 pixels around the element. Which option uses correct Tailwind classes?

A focus:ring-3 focus:ring-red-600 focus:ring-offset-3

B focus:ring-red-600 focus:ring-3-offset-3

C ring-3 focus:ring-offset-red-600 focus:ring-3

D focus:ring-3-offset-3 focus:ring-red-600

💡 Hint

Remember the order and syntax of ring thickness, color, and offset classes.

Option A correctly uses focus:ring-3 for thickness, focus:ring-red-600 for color, and focus:ring-offset-3 for offset space. Other options have invalid class names or wrong order.