Peer Modifier in Tailwind CSS

Tailwind offers a very useful peer class, which is a modifier for controlling the styles of one element based on the state of another.

When paired with sibling selectors, it simplifies interaction-based styling.

For example, suppose you want a label to change color when its associated checkbox is checked. Here's how you can achieve it:

HTML:

<input type="checkbox" id="check" class="peer hidden">
<label for="check" class="cursor-pointer peer-checked:text-blue-500">Click me!</label>

• The checkbox has the peer class.
• The label uses peer-checked:text-blue-500 to change its text color to blue when the checkbox (peer) is checked.

As you can see, this makes it very easy to change your styles when your siblings update.