Peer modifier (sibling state reaction) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What is the visual output when hovering the button?

Given this HTML and Tailwind CSS, what color will the <span> text become when you hover over the <button>?

<button class="peer hover:bg-blue-500 p-2">Hover me</button>
<span class="peer-hover:text-red-600">Change me</span>

Tailwind

<button class="peer hover:bg-blue-500 p-2">Hover me</button>
<span class="peer-hover:text-red-600">Change me</span>

A The span text turns blue when hovering the button.

B The span text turns red when hovering the button.

C The span text turns red when hovering the span itself.

D The span text never changes color on hover.

💡 Hint

Remember, peer-hover applies styles to siblings when the peer is hovered.

The peer class on the button allows the sibling span to react to the button's hover state using peer-hover. So when you hover the button, the span text color changes to red.

❓ layout

intermediate

How does the peer modifier affect sibling layout on focus?

Consider this snippet:

<input type="checkbox" class="peer hidden" id="toggle" />
<label for="toggle" class="cursor-pointer">Toggle</label>
<div class="peer-checked:block hidden p-4 bg-green-200">Content</div>

What happens to the <div> when the checkbox is checked?

Tailwind

<input type="checkbox" class="peer hidden" id="toggle" />
<label for="toggle" class="cursor-pointer">Toggle</label>
<div class="peer-checked:block hidden p-4 bg-green-200">Content</div>

A The div becomes visible only when the label is hovered.

B The div remains hidden regardless of checkbox state.

C The div becomes visible (block) when the checkbox is checked.

D The div becomes visible when the checkbox is focused but not checked.

💡 Hint

Think about how peer-checked works with hidden inputs.

The peer-checked:block class makes the div display as block only when the checkbox (peer) is checked. Otherwise, it stays hidden.

🧠 Conceptual

advanced

Why does the peer modifier not work on non-sibling elements?

Given this structure:

<div>
  <button class="peer">Click</button>
  <section>
    <span class="peer-hover:text-blue-600">Text</span>
  </section>
</div>

Why does the peer-hover class on the span not change its color when hovering the button?

Tailwind

<div>
  <button class="peer">Click</button>
  <section>
    <span class="peer-hover:text-blue-600">Text</span>
  </section>
</div>

A Because peer-hover only works on parent elements, not siblings.

B Because the button needs a hover class for peer-hover to work.

C Because the span needs the peer class, not the button.

D Because <code>peer-hover</code> only works on direct siblings, and the span is nested inside a section.

💡 Hint

Think about the relationship between peer and the element using peer-hover.

The peer-hover modifier only affects elements that are siblings of the element with the peer class. Since the span is inside a section, it is not a sibling of the button, so the style does not apply.

❓ accessibility

advanced

How to ensure keyboard users see peer-hover effects?

Which approach ensures that keyboard users see the same peer-hover styles when focusing the peer element?

<button class="peer hover:bg-yellow-300">Focus me</button>
<div class="peer-hover:text-yellow-600">Highlight me</div>

Tailwind

<button class="peer hover:bg-yellow-300">Focus me</button>
<div class="peer-hover:text-yellow-600">Highlight me</div>

A Add <code>peer-focus:text-yellow-600</code> to the div to react on keyboard focus.

B Add <code>focus-visible:bg-yellow-300</code> to the button only.

C Add <code>hover:text-yellow-600</code> to the div instead of peer-hover.

D No changes needed; keyboard users see hover styles automatically.

💡 Hint

Keyboard users trigger focus, not hover.

Keyboard users navigate with focus, so adding peer-focus ensures the sibling changes style when the peer is focused, matching hover behavior for mouse users.

📝 Syntax

expert

What error occurs with this incorrect peer modifier usage?

What happens when you use this class?

<button class="peer-hover:bg-red-500">Click</button>

Why?

Tailwind

<button class="peer-hover:bg-red-500">Click</button>

A No style changes occur because peer-hover requires the element to be a sibling, not the element itself.

B The button background turns red on hover as expected.

C The button background turns red only when a sibling is hovered.

D A syntax error occurs because peer-hover cannot be used on the same element.

💡 Hint

Think about what peer-hover targets.

The peer-hover modifier applies styles to siblings when the peer element is hovered. Using it on the element itself does nothing because it is not a sibling of itself.

Practice

1. What does the peer modifier in Tailwind CSS allow you to do?

easy

A. Add margin to an element when it is focused.

B. Style sibling elements based on the state of the element with peer.

C. Change the color of the element itself on hover.

D. Create animations on the element when clicked.

Solution

1. Step 1: Understand the role of peer

   The peer modifier is used on an element to mark it as a reference for sibling elements.

2. Step 2: Recognize sibling styling with peer-*

   Siblings can then use peer-* classes to change their style based on the peer element's state.

3. Final Answer:

   Style sibling elements based on the state of the element with peer. -> Option B

4. Quick Check:

   Peer modifier = sibling state styling [OK]

Hint: Peer lets siblings react to one element's state [OK]

Common Mistakes:

• Thinking peer styles the element itself
• Confusing peer with hover or focus on the same element
• Assuming peer adds animations automatically

2. Which of the following is the correct way to use the peer modifier in Tailwind CSS?

easy

A. <input type='checkbox' class='peer' /><label class='peer-checked:text-blue-500'>Check me</label>

B. <input type='checkbox' class='peer-checked' /><label class='peer:text-blue-500'>Check me</label>

C. <input type='checkbox' class='checked-peer' /><label class='text-blue-500'>Check me</label>

D. <input type='checkbox' class='peer' /><label class='checked-peer:text-blue-500'>Check me</label>

Solution

1. Step 1: Identify correct usage of peer on the input

   The element that changes state (checkbox) must have the class peer.

2. Step 2: Use peer-checked on sibling label

   The sibling uses peer-checked: prefix to style based on the checkbox state.

3. Final Answer:

   <input type='checkbox' class='peer' /><label class='peer-checked:text-blue-500'>Check me</label> -> Option A

4. Quick Check:

   Peer on input, peer-checked on sibling [OK]

Hint: Put peer on state element, peer-* on siblings [OK]

Common Mistakes:

• Using peer-checked on the input instead of sibling
• Mixing up class names like checked-peer
• Not adding peer class to the element changing state

3. Given this HTML snippet, what color will the <span> text be when the checkbox is checked?

<input type='checkbox' class='peer' id='toggle' />
<span class='peer-checked:text-green-600'>Status</span>

medium

A. The text will be blue when checked.

B. The text will be red when checked.

C. The text will be green (#16a34a) when checked.

D. The text color will not change on check.

Solution

1. Step 1: Check the peer class on checkbox

   The checkbox has class peer, so siblings can react to its state.

2. Step 2: Analyze the sibling span's class

   The span uses peer-checked:text-green-600, so when checkbox is checked, text color changes to green.

3. Final Answer:

   The text will be green (#16a34a) when checked. -> Option C

4. Quick Check:

   peer-checked:text-green-600 means green text on check [OK]

Hint: peer-checked changes sibling style on checked state [OK]

Common Mistakes:

• Assuming text changes color without peer class
• Confusing green-600 with red or blue
• Ignoring that peer must be on the input

4. Why does this code NOT change the sibling paragraph's text color when the checkbox is checked?

<input type='checkbox' id='check' class='checked' />
<p class='peer-checked:text-red-500'>Warning</p>

medium

A. Because the 'checked' class on input does not trigger sibling styles; only 'peer' does.

B. Because the input has both 'checked' and 'peer' classes, which is invalid.

C. Because the 'checked' class on input is incorrect; it should be 'peer-checked'.

D. Because the 'peer' class must be alone without other classes.

Solution

1. Step 1: Understand the role of 'peer' and 'checked'

   The 'peer' class marks the element for sibling state detection. 'checked' is not a valid Tailwind class for inputs.

2. Step 2: Identify why sibling styles don't apply

   The sibling uses 'peer-checked', which reacts to the input's checked state only if the input has 'peer' class. 'checked' class on input does nothing.

3. Final Answer:

   Because the 'checked' class on input does not trigger sibling styles; only 'peer' does. -> Option A

4. Quick Check:

   Only 'peer' triggers sibling state styles [OK]

Hint: Only 'peer' triggers sibling styles, not 'checked' class [OK]

Common Mistakes:

• Thinking 'checked' class triggers styles
• Assuming multiple classes break peer
• Confusing 'checked' class with input state

5. You want a button's background to turn blue only when a checkbox sibling is focused or checked. Which Tailwind classes correctly achieve this?

<input type='checkbox' class='peer' />
<button class='???'>Submit</button>

hard

A. peer-checked:bg-blue-600 focus-within:bg-blue-600

B. checked:bg-blue-600 focus:bg-blue-600

C. peer:bg-blue-600 peer-checked:bg-blue-600

D. peer-checked:bg-blue-600 peer-focus:bg-blue-600

Solution

1. Step 1: Identify the states to react to on the checkbox

   The checkbox can be checked or focused. We want the button to change background in both cases.

2. Step 2: Use correct peer modifiers on the button

   Use peer-checked:bg-blue-600 for checked state and peer-focus:bg-blue-600 for focus state on the sibling button.

3. Final Answer:

   peer-checked:bg-blue-600 peer-focus:bg-blue-600 -> Option D

4. Quick Check:

   Use peer-checked and peer-focus for sibling states [OK]

Hint: Combine peer-checked and peer-focus for sibling states [OK]

Common Mistakes:

• Using focus:bg-blue-600 instead of peer-focus
• Using checked:bg-blue-600 without peer prefix
• Confusing focus-within with peer-focus