使用Tailwind创建radio输入框时，为何点击一个全部触发ring-2样式？

用Tailwind创建了3个radio输入框，为每个radio设置了唯一ID，但点击其中一个选项时，所有输入框对应的label都会获得ring-2样式，请问这是什么原因？

原代码如下：

<div class="p-8">
  <form>
    <input class="peer sr-only" type="radio" value="yes" name="answer" id="answer_yes_1" />
    <label class="cursor-pointer rounded-lg border border-gray-300 px-8 py-2 text-neutral-500 focus:outline-none peer-checked:border-transparent peer-checked:shadow-lg peer-checked:ring-2 peer-checked:ring-black peer-checked:text-neutral-700" for="answer_yes_1">Classique</label>

    <input class="peer sr-only" type="radio" value="no" name="answer" id="answer_no_1" />
    <label class="cursor-pointer rounded-lg border border-gray-300 px-8 py-2 text-neutral-500 focus:outline-none peer-checked:border-transparent peer-checked:shadow-lg peer-checked:ring-2 peer-checked:ring-black peer-checked:text-neutral-700" for="answer_no_1">Immobilier professionnel</label>

    <input class="peer sr-only" type="radio" value="maybe" name="answer" id="answer_maybe_1" />
    <label class="cursor-pointer rounded-lg border border-gray-300 px-8 py-2 text-neutral-500 focus:outline-none peer-checked:border-transparent peer-checked:shadow-lg peer-checked:ring-2 peer-checked:ring-black peer-checked:text-neutral-700" for="answer_maybe_1">Programmes neufs</label>
  </form>
</div>

原因 #

Tailwind的peer类依赖通用兄弟选择器生效：peer-checked会选中所有在被勾选的peer元素之后的同级兄弟元素。当前结构中三个input是同级的，比如当第一个input被勾选时，后面的两个label也属于它的同级兄弟，因此会被错误地应用peer-checked的样式。

解决办法 #

将每组input和对应的label放入独立容器（如div）中，让每个label只成为对应input的直接兄弟，避免被其他input的peer-checked规则影响。

修正后的代码：

<div class="p-8">
  <form>
    <div>
      <input class="peer sr-only" type="radio" value="yes" name="answer" id="answer_yes_1" />
      <label class="cursor-pointer rounded-lg border border-gray-300 px-8 py-2 text-neutral-500 focus:outline-none peer-checked:border-transparent peer-checked:shadow-lg peer-checked:ring-2 peer-checked:ring-black peer-checked:text-neutral-700" for="answer_yes_1">Classique</label>
    </div>

    <div>
      <input class="peer sr-only" type="radio" value="no" name="answer" id="answer_no_1" />
      <label class="cursor-pointer rounded-lg border border-gray-300 px-8 py-2 text-neutral-500 focus:outline-none peer-checked:border-transparent peer-checked:shadow-lg peer-checked:ring-2 peer-checked:ring-black peer-checked:text-neutral-700" for="answer_no_1">Immobilier professionnel</label>
    </div>

    <div>
      <input class="peer sr-only" type="radio" value="maybe" name="answer" id="answer_maybe_1" />
      <label class="cursor-pointer rounded-lg border border-gray-300 px-8 py-2 text-neutral-500 focus:outline-none peer-checked:border-transparent peer-checked:shadow-lg peer-checked:ring-2 peer-checked:ring-black peer-checked:text-neutral-700" for="answer_maybe_1">Programmes neufs</label>
    </div>
  </form>
</div>

内容的提问来源于stack exchange，提问作者Johan