Focus-within variant in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a blue border when the container or its child is focused using Tailwind's focus-within variant.

Tailwind

<div class="border [1]:border-blue-500 p-4">
  <input type="text" placeholder="Type here" />
</div>

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

Ahover

Bfocus-within

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'focus' instead of 'focus-within' applies style only when the container itself is focused.

Using 'hover' applies style on mouse hover, not focus.

The focus-within variant applies styles when the container or any of its children have focus.

2fill in blank

medium

Complete the code to change the background color of a form group when any input inside it is focused using Tailwind's focus-within variant.

Tailwind

<form class="p-6 rounded [1]:bg-gray-100">
  <label>
    Name:
    <input type="text" class="border p-2" />
  </label>
</form>

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

Afocus-within

Bfocus

Cchecked

Dhover

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'focus' only styles the form when it itself is focused, which rarely happens.

Using 'hover' changes style on mouse hover, not focus.

The focus-within variant changes the background when any child input inside the form is focused.

3fill in blank

hard

Fix the error in the code to correctly apply a red outline to the container when any child input is focused using Tailwind's focus-within variant.

Tailwind

<section class="p-5 border [1]:outline-red-500">
  <input type="text" placeholder="Email" />
</section>

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

Aactive

Bfocus

Cfocus-within

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'focus' applies style only when the container is focused, which is not common.

Using 'active' or 'visited' does not relate to focus states.

The focus-within variant applies styles when any child element inside the container is focused, which is needed here.

4fill in blank

hard

Fill both blanks to apply a green border and change text color to green when any child input inside the div is focused using Tailwind's focus-within variant.

Tailwind

<div class="border p-3 [1]:border-green-500 [2]:text-green-600">
  <input type="text" placeholder="Username" />
</div>

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

Afocus-within

Bhover

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variants for border and text color causes inconsistent behavior.

Using 'hover' or 'active' does not respond to focus on child inputs.

Both blanks use focus-within to style the border and text color when any child input is focused.

5fill in blank

hard

Fill all three blanks to create a card that changes border color, background color, and shadow when any child input is focused using Tailwind's focus-within variant.

Tailwind

<article class="border p-6 rounded [1]:border-purple-600 [2]:bg-purple-50 [3]:shadow-lg">
  <label>
    Email:
    <input type="email" class="p-2 border rounded" />
  </label>
</article>

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

Afocus-within

Bhover

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' for any blank causes styles to activate on mouse hover instead of focus.

Mixing different variants leads to inconsistent styling.

All three blanks use focus-within to style the card when any child input is focused.