Tailwind CSS peer-checked/{name} 不生效，请求排查问题

你的代码存在三个关键问题，导致peer-checked状态无法正常生效、样式不符合预期：

1. 无效的Tailwind类：rounded-1-md #

Tailwind CSS没有rounded-1-md这个内置类，正确的圆角类应为rounded-md（对应border-radius: 0.375rem），也可根据需求选择rounded-sm/rounded-lg等。这个错误不仅会导致label的圆角样式失效，还可能干扰整体样式渲染逻辑。

2. 原生单选框可见性影响交互与视觉 #

原生单选按钮默认会显示圆点，既破坏组件视觉效果，也可能让用户误触原生控件而非label。需要给input添加hidden类，仅隐藏视觉元素，不影响表单功能。

3. 版本兼容性问题 #

peer/{name}这种命名空间语法是Tailwind CSS v3.3及以上版本才支持的特性，若你使用的版本低于v3.3，该语法会直接失效。

修复后的完整代码 #

<div class="inline-flex items-center p-2 rounded-md cursor-pointer text-gray-800">
    <input id="radio1" type="radio" name="toggle" class="peer/draft hidden" checked />
    <label htmlFor="radio1" class="px-4 py-2 rounded-md bg-gray-300 peer-checked/draft:bg-violet-400">Monthly</label>
    <input id="radio2" type="radio" name="toggle" class="peer/published hidden" />
    <label htmlFor="radio2" class="px-4 py-2 rounded-md bg-gray-300 peer-checked/published:bg-violet-400">Annually</label>
</div>

额外优化建议 #

• 给label添加交互样式提升体验：比如hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-violet-500
• 修正拼写错误：将Anually改为Annually

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