`group`

親要素に適用され、親要素に対する操作（ホバーやクリックなど）により子要素のスタイルが変化する。
例えば：

<div class="group">
  <p class="text-gray-500 group-hover:text-orange-500">テキスト</p>
</div>

上記の例では、親要素（div）がホバーされたとき、子要素（p）のテキスト色がオレンジに変わる。

`peer`

同じ階層の要素に対する操作に反応する。peerは操作を受ける要素に適用され、その後ろに続く要素のスタイルが変化する。
例えば：

<input type="checkbox" class="peer" />
<p class="text-gray-500 peer-checked:text-orange-500">テキスト</p>

上記の例では、チェックボックス（input）がチェックされたとき、同じ階層の要素（p）のテキスト色がオレンジに変わる。