原生 radio 无法用 Tailwind 直接美化，因浏览器强制渲染且忽略 border-radius、color 等样式；必须用 appearance-none 隐藏并借助 label 伪元素自定义，同时确保语义结构完整、焦点可见、点击区域充足。
原生 <input type="radio"> 无法直接用 Tailwind 工具类美化——必须隐藏它，再用伪元素或额外 DOM 模拟视觉样式。
为什么不能直接加 rounded 或 text-blue-500
浏览器对 radio 的渲染控制极强：border-radius、color、background 等 CSS 属性在多数浏览器（尤其是 Safari 和旧版 Chrome）中完全无效。直接写 class="rounded-full text-pink-500" 不会改变外观，只影响不可见的原生控件盒模型。
常见错误现象：
- 样式类写了但毫无反应
- 在 Safari 中仍显示灰色圆点，且无法对齐
label - 焦点 outline 错位或消失
标准 HTML 结构必须带 label + for 或包裹
可访问性要求你不能丢掉语义结构。正确写法只有两种：
立即学习“前端免费学习笔记（深入）”；
<input type="radio" id="apple" name="fruit" value="apple"><label for="apple">苹果</label>-
<label><input type="radio" name="fruit" value="apple"> 苹果</label>（推荐，更健壮）
漏掉 id/for 或未包裹会导致屏幕阅读器无法识别，且点击文字不触发选中。
用 ::before + ::after 实现自定义圆点
核心思路：隐藏原生 radio，用 label 的伪元素画出新样式。关键 CSS 片段：
@layer base {
[type='radio'] {
@apply appearance-none w-4 h-4 border-2 border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500;
}
[type='radio']:checked {
@apply border-transparent bg-blue-500;
}
[type='radio']:checked::before {
content: '';
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
margin: 2px;
background-color: white;
}
}
说明：
-
appearance-none是必须的，否则 Safari/Chrome 会强行渲染原生控件 -
focus:ring-2提供键盘导航时的可见焦点反馈 -
::before里用margin控制内圆居中，避免硬编码transform - 不要用
background-image或 SVG 作为圆点——兼容性和缩放表现差
和 @tailwindcss/forms 插件共存要注意什么
该插件默认会给 radio 加 appearance-none 和基础尺寸，但它不处理 :checked 状态下的填充色或内圆。如果你已启用插件：
- 删掉插件自动注入的
[type='radio']规则（通过@layer base覆盖） - 插件生成的
focus:ring可能和你的focus:ring-2冲突，建议统一用@layer base重写 - 插件不支持深色模式自动切换，如需 dark mode，得手动加
dark:[type='radio']:checked
真正容易被忽略的是：所有自定义 radio 样式都依赖于 label 的点击区域是否足够大。务必给 label 加 flex items-center gap-2 cursor-pointer，否则用户很难精准点中那个 4×4px 的隐藏控件。
