如何用Tailwind（无需JS）分组切换非嵌套非兄弟级联单选按钮组

Tailwind本身没有直接支持非嵌套/非兄弟元素级联切换的内置方案，因为它的核心变体（如checked:）默认只作用于当前元素或直接兄弟元素。要实现你要的跨层级联动效果，需要自定义Tailwind变体结合CSS选择器来实现，同时完全可以做到无JS、符合RSC优先的要求。

具体实现步骤 #

1. 自定义Tailwind变体 #

在tailwind.config.js中添加自定义变体，利用CSS的:has()选择器关联单选按钮状态和目标时段元素：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function({ addVariant }) {
      addVariant('date-checked', '&:has(input:checked)');
      addVariant('show-on-date-checked', '.date-group:has(input:checked) ~ &');
      // 可根据实际DOM结构调整选择器逻辑
    },
  ],
}

2. 无JS的DOM结构与样式实现 #

利用原生HTML单选按钮的name属性分组，结合自定义变体控制时段显示：

// 服务端组件示例
export default function DateTimeSelector() {
  return (
    <div className="space-y-4">
      {/* 日期横向组 */}
      <div className="flex gap-2">
        <div className="date-group">
          <input type="radio" name="date-select" id="date1" className="sr-only" defaultChecked />
          <label htmlFor="date1" className="date-checked:bg-blue-600 date-checked:text-white px-4 py-2 rounded-lg cursor-pointer">
            10月1日
          </label>
        </div>
        <div className="date-group">
          <input type="radio" name="date-select" id="date2" className="sr-only" />
          <label htmlFor="date2" className="date-checked:bg-blue-600 date-checked:text-white px-4 py-2 rounded-lg cursor-pointer">
            10月2日
          </label>
        </div>
      </div>

      {/* 对应日期的时段选项 */}
      <div className="show-on-date-checked:block hidden bg-gray-100 p-4 rounded-lg">
        {/* 10月1日的时段 */}
        <div className="grid grid-cols-4 gap-2">
          <span className="py-2 text-center bg-white rounded-md cursor-pointer">09:00</span>
          <span className="py-2 text-center bg-white rounded-md cursor-pointer">10:00</span>
          {/* 更多时段 */}
        </div>
      </div>
      <div className="show-on-date-checked:block hidden bg-gray-100 p-4 rounded-lg">
        {/* 10月2日的时段 */}
        <div className="grid grid-cols-4 gap-2">
          <span className="py-2 text-center bg-white rounded-md cursor-pointer">14:00</span>
          <span className="py-2 text-center bg-white rounded-md cursor-pointer">15:00</span>
          {/* 更多时段 */}
        </div>
      </div>
    </div>
  );
}

3. 关键细节说明 #

• 用sr-only类隐藏原生单选按钮，仅保留交互逻辑
• 自定义变体date-checked用于控制选中日期标签的样式变化
• show-on-date-checked变体通过:has()和兄弟选择器~控制对应时段的显示/隐藏
• 完全基于原生HTML和CSS实现，无需任何JavaScript，完美适配RSC场景

注意事项 #

• 确保目标浏览器支持:has()选择器（现代浏览器均已支持，RSC场景下通常无需兼容过旧浏览器）
• 根据实际DOM结构调整自定义变体中的选择器，比如如果时段元素不是日期组的直接兄弟，需调整选择器路径

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