What are Peer and Group modifiers? | Tailwind CSS Interview Questions

What You'll Learn

Group modifier for parent state
Peer modifier for sibling state
Named groups and peers

Group Modifier

Style children based on parent state:

index.htmlHTML

<div class="group hover:bg-gray-100 p-4 cursor-pointer">
  <h3 class="group-hover:text-blue-500">Title</h3>
  <p class="group-hover:text-gray-900">Description</p>
</div>

Peer Modifier

Style based on sibling state:

index.htmlHTML

<input type="checkbox" class="peer" />
<label class="peer-checked:text-green-500">
  Checked!
</label>

<input class="peer" placeholder="Email" />
<p class="hidden peer-invalid:block text-red-500">
  Invalid email
</p>

Named Groups/Peers

For nested groups:

index.htmlHTML

<div class="group/card">
  <div class="group/title">
    <h3 class="group-hover/card:text-blue-500
               group-hover/title:underline">
      Title
    </h3>
  </div>
</div>

Common Patterns

index.htmlHTML

<!-- Show icon on card hover -->
<div class="group relative">
  <img src="..." />
  <button class="opacity-0 group-hover:opacity-100">
    Edit
  </button>
</div>

<!-- Form validation message -->
<input class="peer" required />
<span class="invisible peer-invalid:visible">
  Required field
</span>