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.