Focus-within variant in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What does the focus-within variant do in Tailwind CSS?

Choose the correct description of the focus-within variant in Tailwind CSS.

A Applies styles when any child element inside the element is focused.

B Applies styles when the element is active (clicked).

C Applies styles only when the element is hovered.

D Applies styles when an element itself is focused.

💡 Hint

Think about when the styles apply related to focus inside nested elements.

The focus-within variant applies styles to a parent element when any of its child elements receive focus. This helps style containers based on focus inside them.

❓ rendering

intermediate

What visual effect will this Tailwind code produce when you focus inside the input?

Given this HTML and Tailwind CSS, what will happen when the user clicks inside the input box?

Tailwind

<div class="border-2 border-gray-300 focus-within:border-blue-500 p-4">
  <label for="name" class="block mb-2">Name</label>
  <input id="name" type="text" class="border p-2 w-full" />
</div>

A Only the input border changes color to blue.

B The label text color changes to blue.

C The border around the entire div changes from gray to blue.

D Nothing changes visually on focus.

💡 Hint

Look at which element has the focus-within class and what it styles.

The focus-within:border-blue-500 applies to the div. When the input inside is focused, the div's border color changes to blue.

📝 Syntax

advanced

Which Tailwind class correctly applies a background color when a container or its children are focused?

Select the correct Tailwind class to change background color on focus within the container.

A bg-gray-100 focus-within:bg-yellow-200

B bg-gray-100 focus:bg-yellow-200

C bg-gray-100 hover-within:bg-yellow-200

D bg-gray-100 active-within:bg-yellow-200

💡 Hint

Remember the exact variant name for focus inside children.

focus-within is the correct variant to apply styles when the container or any child is focused. Other variants like focus apply only to the element itself.

❓ accessibility

advanced

Why is using focus-within helpful for accessibility in forms?

Choose the best reason why focus-within improves accessibility for users navigating forms.

A It disables all other inputs when one input is focused.

B It highlights the entire form section when any input inside is focused, helping users see context.

C It automatically submits the form when an input is focused.

D It hides labels when inputs are focused to reduce clutter.

💡 Hint

Think about how focus indication helps users understand where they are on the page.

focus-within allows styling of a container to visually group focused inputs, making it easier for keyboard and screen reader users to understand form structure.

❓ layout

expert

What is the effect of combining focus-within with Flexbox in this example?

Consider this HTML and Tailwind CSS snippet. What happens to the layout when the input inside the flex container is focused?

Tailwind

<div class="flex gap-4 p-4 border-2 border-gray-400 focus-within:border-green-600">
  <label for="email" class="flex-1">Email</label>
  <input id="email" type="email" class="flex-1 border p-2" />
</div>

A The flex container switches to column layout on focus.

B The input expands to fill the container when focused, breaking the layout.

C The label disappears when the input is focused.

D The border color of the flex container changes to green, but the layout stays the same.

💡 Hint

Focus on what focus-within changes and how Flexbox behaves by default.

The focus-within:border-green-600 changes the border color of the flex container on focus inside. Flexbox layout remains unchanged because no layout properties are altered.