Group dan Peer memungkinkan styling berdasarkan state element lain.

group — styling child saat parent di-hover/focus:

<div class="group cursor-pointer rounded-lg p-4 hover:bg-blue-50">
  <h3 class="group-hover:text-blue-600">Judul Card</h3>
  <p class="group-hover:text-blue-400">Deskripsi</p>
</div>

Saat div di-hover → h3 DAN p berubah warna!

peer — styling sibling berdasarkan state element sebelumnya:

<input type="checkbox" class="peer" id="toggle" />
<label class="peer-checked:text-green-500" for="toggle">
  Centang saya
</label>

Saat checkbox dicentang → label berubah hijau!

Modifier lanjutan:

<!-- First & last child -->
<li class="first:pt-0 last:pb-0">Item</li>

<!-- Odd & even -->
<tr class="odd:bg-gray-50 even:bg-white">Row</tr>

<!-- has-[] (parent berdasarkan child) -->
<div class="has-[input:focus]:ring-2">
  <input type="text" />
</div>

<!-- Arbitrary variants -->
<div class="[&>p]:text-gray-500">
  <p>Semua p di dalam div ini abu-abu</p>
</div>

<!-- Stacking modifiers -->
<button class="dark:hover:bg-blue-700">Tombol</button>

Tips: group dan peer menghindari kebutuhan JavaScript untuk interaksi UI sederhana.