如何使用Tailwind实现复选框选中时修改父div背景颜色

由于CSS原生不支持父选择器，Tailwind的peer也只能作用于兄弟元素，所以可以通过以下两种方式实现需求：

方案1：调整HTML结构配合Tailwind实现（无JS） #

调整结构让复选框和目标容器成为兄弟关系，用peer和peer-checked类控制样式，同时通过绝对定位保持原布局：

<div class="relative">
  <input
    id="bordered-checkbox-1"
    type="checkbox"
    value=""
    name="bordered-checkbox"
    class="peer absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-0 z-10"
  />
  <div
    class="flex items-center pl-4 border border-gray-200 rounded-xl py-4 peer-checked:bg-blue-50"
  >
    <label
      for="bordered-checkbox-1"
      class="w-full ml-2 text-sm"
      >Default checkbox</label
    >
  </div>
</div>

• 外层relative容器作为复选框绝对定位的参照
• 复选框添加peer类，通过绝对定位还原到原位置，z-10确保可点击
• 目标容器添加peer-checked:bg-blue-50，复选框选中时自动应用背景色

方案2：用JavaScript实现（保留原有结构） #

如果不想修改HTML结构，直接监听复选框状态变化，动态给父容器切换样式类：

<div
  class="flex items-center pl-4 border border-gray-200 rounded-xl"
>
  <input
    id="bordered-checkbox-1"
    type="checkbox"
    value=""
    name="bordered-checkbox"
    class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-0"
  />
  <label
    for="bordered-checkbox-1"
    class="w-full py-4 ml-2 text-sm"
    >Default checkbox</label
  >
</div>

<script>
const checkbox = document.getElementById('bordered-checkbox-1');
const container = checkbox.parentElement;

checkbox.addEventListener('change', function() {
  container.classList.toggle('bg-blue-50', this.checked);
});
</script>

• 监听复选框的change事件
• 用classList.toggle根据选中状态自动添加/移除背景色类

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