【TailwindCSS】peerの使用方法

以下のようにpeerを使用すると兄弟要素の状態に基づいてスタイルを設定できます。

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer ..."/>
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
      Please provide a valid email address.
    </p>
  </label>
</form>

peerを先に記述している要素に記述しなければ適用されません。
以下のように記述した場合には適用されません。

<!-- spanとinputの順番を入れ替えなければ適用されない -->

<label>
  <span class="peer-invalid:text-red-500 ...">Email</span>
  <input type="email" class="peer ..."/>
</label>