Tailwind CSS：子复选框选中时修改父级Label样式

Tailwind的peer和peer-checked仅支持同级元素之间的样式联动，你把input放在label内部（父子关系），所以这套规则无法生效。下面给两种可行的解决办法：

办法1：调整DOM结构，让input和label同级 #

把input移到label外面，保持for属性关联，这样就能正常使用peer系列类：

<div class="flex items-center w-fit">
  <input type="checkbox" id="choose-me" class="peer mr-3" />
  <label 
    for="choose-me"
    class="flex items-center justify-evenly p-3 border-2 border-grey-4 text-grey-8
           peer-checked:bg-light-indigo peer-checked:text-medium-indigo peer-checked:border-medium-indigo">
    Check me
  </label>
</div>

办法2：使用Tailwind的:has()伪类（无需调整结构） #

如果不想改动DOM结构，可以用Tailwind v3.2+支持的:has()父选择器语法，直接在label上针对内部选中的input应用样式：

<label
  for="choose-me"
  class='flex w-fit items-center justify-evenly p-3 border-2 border-grey-4 text-grey-8 
         has-[input:checked]:bg-light-indigo has-[input:checked]:text-medium-indigo has-[input:checked]:border-medium-indigo'>
  <input type="checkbox" id="choose-me" class="mr-3" />
  Check me
</label>

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