如何用TailwindCSS实现:selected状态？单选框选中改父div样式

方法1：纯Tailwind实现（自定义变体 + CSS :has选择器） #

Tailwind默认没有提供针对父元素的:checked状态变体，但可以通过自定义变体结合CSS的:has()选择器实现。如果用CDN版本的Tailwind，你可以在配置中扩展这个变体：

<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      variants: {
        extend: {
          backgroundColor: ['has-checked'],
          // 可按需扩展其他样式属性，比如borderColor、textColor等
        },
      },
    },
  }
}
</script>

<style type="text/tailwindcss">
@layer utilities {
  .has-checked\:bg-blue-100:has(input:checked) {
    background-color: rgb(219 234 254);
  }
}
</style>

修改HTML结构，给父div添加自定义工具类：

<div class="flex items-center mb-4 has-checked:bg-blue-100">
  <input id="default-radio-1" type="radio" value="" name="default-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
  <label for="default-radio-1" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Default radio</label>
</div>
<div class="flex items-center mb-4 has-checked:bg-blue-100">
  <input checked id="default-radio-2" type="radio" value="" name="default-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
  <label for="default-radio-2" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Checked state</label>
</div>

这种方法依赖浏览器对:has()选择器的支持，目前Chrome、Firefox 121+、Safari 15.4+等现代主流浏览器均支持。

方法2：用AlpineJS实现（兼容性更好） #

如果需要更好的兼容性，或者不想修改Tailwind配置，用AlpineJS绑定状态是更简单的方式：

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ selected: 'radio2' }" class="space-y-4">
  <div class="flex items-center mb-4" :class="selected === 'radio1' ? 'bg-blue-100' : ''">
    <input id="default-radio-1" type="radio" value="radio1" name="default-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" @change="selected = $event.target.value">
    <label for="default-radio-1" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Default radio</label>
  </div>
  <div class="flex items-center mb-4" :class="selected === 'radio2' ? 'bg-blue-100' : ''">
    <input checked id="default-radio-2" type="radio" value="radio2" name="default-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" @change="selected = $event.target.value">
    <label for="default-radio-2" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Checked state</label>
  </div>
</div>

这里通过AlpineJS的x-data管理选中值，用:class动态绑定背景色类，当单选框被选中时更新selected值，从而切换父容器的样式。这种方式兼容性更好，逻辑直观，适合需要支持旧浏览器的场景。

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