一个仅支持CSS的解决方案是使用:has伪选择器（注意：在Firefox中尚不支持）。只有当标签包含了一个已选中的复选框时，才会应用这些类。

• • 索引. css**

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .checkbox-label:has(input:checked) {
    @apply border-blue-800 bg-blue-400 text-blue-800;
  }
}

• • 您的JSX：**（去掉未使用的类）

<label className="checkbox-label justify-evely border-grey-4 text-grey-8 flex w-fit items-center gap-x-2 border-2 p-3">
  <input type="checkbox" id="choose-me" />
  Check me
</label>

您可以在这里测试：https://play.tailwindcss.com/zidP4zm2Pq
支持:has的浏览器列表：www.example.comhttps://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility

使用useState处理活动状态：

const [isactive,setActive] = useState(false)

在JSX中：

<label
  onClick={()=>setActive(isactive?false:true)}
  className= {`${isactive?'active-style':'normal-style'} extra-style-classes`}
>
  <input type="checkbox" id="choose-me" className= {`${isactive?'active-style':'normal-style'} extra-style-classes`} />
  Check me
</label>

首先，记住tailwind中的peer功能并不针对父元素（这是您目前拥有的），您只能针对彼此相邻的元素。
此外，由于CSS :peer组合子的工作方式，您只能将 * previous * 组件作为目标，这意味着复选框必须出现在选中复选框时要影响的对等体的状态之前。

<label
  htmlFor="choose-me"
  class=
    'flex w-fit items-center justify-evely p-3 text-grey-8 relative'
>
  <input type="checkbox" id="choose-me" class="peer mr-3 relative z-10" />
  <div class="absolute inset-0 border-2 border-grey-4 peer-checked:bg-indigo-200 peer-checked:text-indigo-800 peer-checked:border-indigo-800 peer-checked:block z-0"></div>
  <span class="relative z-10">Check me</span>
</label>

下面是一个使用纯tailwind/css的示例，假设您不想在react组件中处理状态，正如@Vikesir的评论所述（尽管这也是我的第一个想法，而且是个好主意）。
你会注意到我在一个空的div中做了手脚，用它来模拟背景和边框的变化，我还把标签文本放在一个span中，以确保我可以改变它的z轴，这样复选框和文本都可以在处理状态变化的div上方看到。

• • 编辑：**

如果您不希望代码中出现空的div，下面的版本使用了一个伪元素，该伪元素构建自保存标签文本的span：

<label
  htmlFor="choose-me"
  class=
    'flex w-fit items-center justify-evely text-grey-8 relative'
>
  <input type="checkbox" id="choose-me" class="peer mr-3 absolute left-2.5 z-20" />
  <span class="relative z-10 inset-0 py-3 pr-3 pl-8 before:-z-10 before:content-[''] before:absolute before:inset-0 before:h-full before:w-full before:border-2 before:border-grey-4 peer-checked:before:bg-indigo-200 peer-checked:before:text-indigo-800 peer-checked:before:border-indigo-800 peer-checked:before:block">Check me</span>
</label>