Tailwind CSS first-child/last-child在Headless UI单选组样式问题求助

问题根源 #

你遇到的问题是因为每个RadioGroup.Label都是它直接父元素RadioGroup.Option的唯一子元素，所以对所有Label来说，:first-child和:last-child的判定条件都成立，导致所有标签都被加上了圆角样式，而非只有首尾选项的Label生效。

解决方案 #

不用依赖CSS伪类，直接通过循环索引精准控制首尾选项的Label样式，或通过父容器伪类定位目标Label，两种方式均可解决问题：

方式1：循环索引判断（推荐，直观易维护）

遍历items数组时，通过索引判断当前项是否为第一个或最后一个，给对应的RadioGroup.Label添加圆角样式：

<RadioGroup value={selectedValue} onChange={handleChange}>
  {/* 用容器包裹所有选项，保证布局连贯 */}
  <div className="flex">
    {items.map((item, index) => (
      <RadioGroup.Option
        key={item.value}
        value={item.value}
        className={`relative cursor-pointer px-4 py-2 ${
          index === 0 ? 'rounded-l-2xl' : ''
        } ${index === items.length - 1 ? 'rounded-r-2xl' : ''}`}
      >
        <RadioGroup.Label
          className={`block w-full py-1 ${
            index === 0 ? 'rounded-l-2xl' : ''
          } ${index === items.length - 1 ? 'rounded-r-2xl' : ''}`}
        >
          {item.label}
        </RadioGroup.Label>
        {/* 可选：添加选中状态视觉反馈 */}
        <RadioGroup.Indicator className="absolute inset-0 bg-blue-100 opacity-0 group-data-[checked]:opacity-100 rounded-inherit" />
      </RadioGroup.Option>
    ))}
  </div>
</RadioGroup>

方式2：父容器伪类定位

给包裹所有选项的容器添加类名，通过CSS选择器定位首尾选项内的Label：

1. 在Tailwind全局样式文件中添加自定义规则：

.radio-group-container > :first-child .radio-label {
  @apply rounded-l-2xl;
}
.radio-group-container > :last-child .radio-label {
  @apply rounded-r-2xl;
}

2. 组件中应用样式：

<RadioGroup value={selectedValue} onChange={handleChange}>
  <div className="flex radio-group-container">
    {items.map((item) => (
      <RadioGroup.Option
        key={item.value}
        value={item.value}
        className="relative cursor-pointer px-4 py-2"
      >
        <RadioGroup.Label className="block w-full py-1 radio-label">
          {item.label}
        </RadioGroup.Label>
        <RadioGroup.Indicator className="absolute inset-0 bg-blue-100 opacity-0 group-data-[checked]:opacity-100 rounded-inherit" />
      </RadioGroup.Option>
    ))}
  </div>
</RadioGroup>

两种方式都能避免伪类误匹配，确保只有首尾选项的Label会应用圆角样式。

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