Peer modifier (sibling state reaction) in Tailwind - Browser Rendering Trace

Render Flow - Peer modifier (sibling state reaction)

Parse HTML structure

↓

Identify peer elements

↓

Parse Tailwind classes

↓

Detect peer modifier usage

↓

Apply styles conditionally based on sibling state

↓

Repaint affected elements

The browser reads the HTML and CSS, then Tailwind's peer modifier applies styles to sibling elements based on the state (like hover) of a peer element, triggering repaint of those siblings.

Render Steps - 3 Steps

Code Added:<button class="peer px-4 py-2 bg-gray-300">Button 1</button> <span>I change color when Button 1 is hovered</span>

Before

[Button 1]_[Span text]

Button 1 background: gray
Span text color: default (black)

→

After

[Button 1]_[Span text]

Button 1 background: gray
Span text color: default (black)

Initial layout with button and span side by side, no hover yet so span text color is default.

🔧 Browser Action:Construct DOM tree and apply base styles

Code Sample

A button and a span side by side. When you hover the button, the span text color changes to blue.

Tailwind

<div class="flex space-x-4">
  <button class="peer px-4 py-2 bg-gray-300 hover:bg-blue-500">Button 1</button>
  <span class="peer-hover:text-blue-500">I change color when Button 1 is hovered</span>
</div>

Render Quiz - 3 Questions

After applying step 3, what visual change happens to the sibling span when the button is hovered?

A The button text color changes to blue

B The span background changes to blue

C The span text color changes to blue

D Nothing changes visually

Common Confusions - 2 Topics

Why doesn't the sibling element change style when I hover the peer?

The sibling must have a class starting with 'peer-' to react to the peer's state. Without 'peer-' prefix, sibling styles won't change.

💡 Use 'peer-' prefix on sibling classes to link styles to peer's state (see render_step 3).

Can the peer modifier style elements that are not siblings?

No, peer modifiers only work on siblings that share the same parent element.

💡 Peer modifier affects only direct siblings inside the same container.

Property Reference

Property	Value Applied	Target Element	Visual Effect	Common Use
peer	class on element	The element itself	Marks element as a peer for sibling state detection	Enable sibling state styling
peer-hover	text-blue-500	Sibling element	Changes text color when peer is hovered	Style siblings on peer hover
hover	bg-blue-500	Element itself	Changes background color on hover	Direct hover styling

Concept Snapshot

Peer modifier lets sibling elements change style based on another element's state. Add 'peer' class to the element to watch. Use 'peer-hover:' prefix on siblings to style them when peer is hovered. Works only for siblings sharing the same parent. Common for hover or focus interactions affecting nearby elements.