【Tailwind CSS】親要素と子要素（または同じ階層の要素）間のスタイル相互作用【groupとpeer】

groupとpeerの主な違いは、スタイルを適用する対象がどの要素との相互作用に基づいているか。

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）のテキスト色がオレンジに変わる。

つまり、groupは「親要素の操作で子要素のスタイルを変える」ために、peerは「同じ階層の要素の操作でその後ろに続く要素のスタイルを変える」ために使用する。