Peer modifier (sibling state reaction) in Tailwind - Mini Project: Build & Apply

Interactive Button Group with Peer Modifier in Tailwind CSS

📖 Scenario: You are building a simple button group where clicking one button highlights it and changes the style of its sibling buttons. This is a common UI pattern for toggles or filters.

🎯 Goal: Create a group of three buttons styled with Tailwind CSS. When you hover over one button, the other buttons change their background color using the peer modifier to react to sibling state changes.

📋 What You'll Learn

Use Tailwind CSS utility classes

Create three buttons inside a container

Use the peer class on each button

Use peer-hover to change sibling buttons' background color on hover

Ensure the buttons have accessible labels and keyboard focus styles

💡 Why This Matters

🌍 Real World

Peer modifiers are useful for interactive UI elements like tabs, toggles, and filters where one element's state affects others.

💼 Career

Understanding peer modifiers in Tailwind CSS helps build accessible, interactive, and visually responsive web components used in modern web applications.

1

Create the button group container and three buttons

Write HTML to create a <div> container with the class flex. Inside it, create three <button> elements with the text Button 1, Button 2, and Button 3. Each button should have the Tailwind class px-4 py-2 border.

Tailwind

Need a hint?

Use a <div> with class flex to arrange buttons horizontally. Add three <button> elements with the exact classes and text.

2

Add the peer class to each button

Add the Tailwind class peer to each of the three buttons inside the container.

Tailwind

  Button 1
  Button 2
  Button 3
  

Need a hint?

The peer class allows sibling elements to react to this button's state. Add it to all buttons.

3

Use peer-hover to change sibling buttons' background on hover

Add the class peer-hover:bg-gray-200 to each button so that when a sibling button is hovered, this button's background changes to gray-200.

Tailwind

  Button 1
  Button 2
  Button 3
  

Need a hint?

The peer-hover modifier changes this button's style when a sibling with peer is hovered. Add it to all buttons.

4

Add accessible focus styles and aria-labels

Add the Tailwind class focus:outline-none focus:ring-2 focus:ring-blue-500 to each button for keyboard focus styles. Also add aria-label attributes with values Button 1, Button 2, and Button 3 respectively.

Tailwind

  Button 1
  Button 2
  Button 3
  

Need a hint?

Focus styles help keyboard users see which button is focused. Aria-labels improve screen reader accessibility. Add both to each button.