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.

Practice

1.

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

easy

A. It applies styles to a parent element when any child element inside it is focused.

B. It applies styles only to the focused child element itself.

C. It applies styles to all sibling elements of the focused element.

D. It disables focus styles on all child elements.

Solution

1. Step 1: Understand the focus-within behavior

   The focus-within variant targets the parent element when any child inside it receives focus.

2. Step 2: Compare options with this behavior

   Only It applies styles to a parent element when any child element inside it is focused. correctly describes this behavior, while others describe different or incorrect behaviors.

3. Final Answer:

   It applies styles to a parent element when any child element inside it is focused. -> Option A

4. Quick Check:

   focus-within targets parent on child focus [OK]

Hint: Remember: focus-within styles the parent, not the child [OK]

Common Mistakes:

• Thinking focus-within styles only the focused child
• Confusing focus-within with focus-visible
• Assuming it styles siblings of the focused element

2.

Which of the following is the correct Tailwind CSS syntax to change the background color of a <div> when any child inside it is focused?

<div class="?">
  <input type="text" />
</div>

easy

A. focus-child:bg-blue-200

B. focus:bg-blue-200

C. focus-within:bg-blue-200

D. focus-visible:bg-blue-200

Solution

1. Step 1: Identify the correct variant for parent styling on child focus

   The focus-within variant applies styles to the parent when any child is focused.

2. Step 2: Match the variant with the correct syntax

   focus-within:bg-blue-200 uses focus-within:bg-blue-200, which is the correct Tailwind syntax for this effect.

3. Final Answer:

   focus-within:bg-blue-200 -> Option C

4. Quick Check:

   Parent focus style on child focus = focus-within:bg-color [OK]

Hint: Use focus-within: prefix to style parent on child focus [OK]

Common Mistakes:

• Using focus: which styles only the focused element
• Using non-existent focus-child variant
• Confusing focus-visible with focus-within

3.

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

<div class="border-2 border-gray-300 focus-within:border-green-500 p-4">
  <input type="text" class="outline-none" />
</div>

medium

A. The div's background color changes to green.

B. The input's border color changes to green when focused.

C. Nothing changes because focus-within doesn't work on div.

D. The div's border color changes to green when the input is focused.

Solution

1. Step 1: Understand focus-within effect on the div

   The div has a gray border by default and changes border color to green when any child (input) is focused.

2. Step 2: Identify what changes on input focus

   When the input is focused, the div's border changes to green, not the input's border or background color.

3. Final Answer:

   The div's border color changes to green when the input is focused. -> Option D

4. Quick Check:

   focus-within changes parent border color [OK]

Hint: focus-within changes parent styles, not child styles [OK]

Common Mistakes:

• Thinking input border changes instead of div border
• Assuming background color changes without code
• Believing focus-within doesn't apply to div

4.

What is wrong with this Tailwind CSS usage if the goal is to highlight the parent div's border when the input inside is focused?

<div class="border-2 border-gray-300 focus:border-green-500 p-4">
  <input type="text" class="outline-none" />
</div>

medium

A. Missing outline-none on the input element.

B. Using focus: on the parent instead of focus-within:.

C. The border color classes are in the wrong order.

D. The input element needs a focus-visible class.

Solution

1. Step 1: Identify the variant used on the parent div

   The parent div uses focus:border-green-500, which applies styles only when the div itself is focused.

2. Step 2: Understand the correct variant for child focus affecting parent

   To style the parent when a child is focused, focus-within: must be used instead of focus:.

3. Final Answer:

   Using focus: on the parent instead of focus-within:. -> Option B

4. Quick Check:

   Parent highlight on child focus needs focus-within: [OK]

Hint: Use focus-within: on parent, not focus: for child focus styles [OK]

Common Mistakes:

• Using focus: instead of focus-within:
• Thinking input needs focus-visible class
• Believing border order affects focus styles

5.

You want to create a form section that highlights its border in blue when any input or textarea inside is focused. Which Tailwind CSS class combination correctly achieves this?

<section class="?">
  <input type="text" />
  <textarea></textarea>
</section>

hard

A. border-2 border-gray-400 focus-within:border-blue-600 p-6 rounded-lg

B. border-2 border-gray-400 focus:border-blue-600 p-6 rounded-lg

C. border-2 border-gray-400 focus-visible:border-blue-600 p-6 rounded-lg

D. border-2 border-gray-400 hover-within:border-blue-600 p-6 rounded-lg

Solution

1. Step 1: Identify the variant that styles parent on child focus

   The focus-within: variant applies styles to the parent when any child element is focused.

2. Step 2: Check the class combinations for correct usage

   border-2 border-gray-400 focus-within:border-blue-600 p-6 rounded-lg uses focus-within:border-blue-600 on the section, which highlights the border when input or textarea inside is focused.

3. Final Answer:

   border-2 border-gray-400 focus-within:border-blue-600 p-6 rounded-lg -> Option A

4. Quick Check:

   Parent border highlight on child focus = focus-within:border-color [OK]

Hint: Use focus-within: on container to highlight on any child focus [OK]

Common Mistakes:

• Using focus: which styles only the container if focused
• Using focus-visible: which targets keyboard focus only
• Using non-existent hover-within: variant