Tailwind CSSで兄弟要素にスタイルを設定する

Tailwind CSSで兄弟要素にスタイルを設定したいということがあったので、方法をメモ。
使用環境はAastro 5.16.0 / Tailwind CSS 4.1.17になります。

サンプルコード

やりたかったこととしてはチェックボックスのinputとlabelを並べて記述して、チェックが入ったときにlabelのスタイルを変更するという実装になります。
こういった場合、peerというclassを使うようです。

<input
  type="checkbox"
  name="check"
  id="check01"
  class="
    peer
  "
>
<label for="check01"
  class="
    peer-checked:text-red-700
  "
>チェックボックス</label>

inputに対してpeer、その兄弟要素にあたるlabelに対してpeer-checked: + チェック後のclassを付与することで、想定した動作になりました。
兄弟要素にスタイルを設定するデモページ
今回はチェックボックスだったのでpeer-checked:でしたが、例えばhover時にスタイルを適用したい場合などはpeer-hover:のようになります。