What is Peer modifier (sibling state reaction) in Tailwind?

Tailwindmarkup~5 mins

Peer modifier (sibling state reaction) in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

The peer modifier lets one element change style when its sibling changes state, like when a checkbox is checked.

You want a label to highlight when its checkbox is checked.

You want to show or hide a message when a related input is focused.

You want a button to change color when a nearby toggle is active.

You want to style a sibling element based on a form control's state.

Syntax

Tailwind

peer:[state]:[utility]

The element that changes state must have the class peer.

The sibling uses peer- prefix to react to that state.

Examples

The label text turns blue when the checkbox is checked.

Tailwind

<input type="checkbox" class="peer" />
<label class="peer-checked:text-blue-600">Check me</label>

The div background changes when the radio button is selected.

Tailwind

<input type="radio" class="peer" />
<div class="peer-checked:bg-green-200">Selected</div>

The paragraph text turns red when the input is focused.

Tailwind

<input type="text" class="peer" />
<p class="peer-focus:text-red-500">Input is focused</p>

Sample Program

This example has a hidden checkbox with class peer. The label changes background and text color when the checkbox is checked. The sibling span text color also changes using peer-checked.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Peer Modifier Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center justify-center min-h-screen bg-gray-50 p-4">
  <h1 class="text-2xl font-semibold mb-4">Peer Modifier Demo</h1>
  <div class="flex items-center space-x-3">
    <input type="checkbox" id="toggle" class="peer hidden" />
    <label for="toggle" class="cursor-pointer px-4 py-2 border rounded peer-checked:bg-blue-600 peer-checked:text-white">
      Toggle Me
    </label>
    <span class="text-gray-700 peer-checked:text-blue-600">
      Status changes when toggle is checked
    </span>
  </div>
</body>
</html>

OutputSuccess

Important Notes

The peer class must be on the element whose state you want to watch.

Only siblings after the peer element can react to its state.

This works well for inputs like checkboxes, radios, and focus states.

Summary

The peer modifier lets one element style its siblings based on its state.

Use peer on the element changing state, and peer-* on siblings reacting.

This helps create interactive UI without JavaScript.