tailwind.config.js 中 theme.extend.forms 无效，因 @tailwindcss/forms 插件未暴露 forms theme key，所有样式硬编码于 PostCSS 插件内，不走主题解析流程；须用 @layer base 在主 CSS 中覆盖焦点、边框等样式，并兼顾可访问性。
直接改 tailwind.config.js 里的 theme.extend.forms 没用——@tailwindcss/forms 根本不读这个配置项，所有样式硬编码在插件内部。
为什么 tailwind.config.js 的 forms 配置完全无效
插件作者明确没暴露 forms 这个 theme key。你在 theme.extend 下写任何 forms: { } 都会被 Tailwind 编译器静默忽略。这不是你漏写了什么，是插件设计如此：它只注入 @layer base 层的 CSS，不参与主题解析流程。
- 所有重置逻辑（比如
input[type="checkbox"] { appearance: none; background: transparent; }）都写死在 PostCSS 插件源码里 -
extend只对 Tailwind 原生支持的 theme keys（如colors、spacing）生效 - 试图靠
addUtilities或addComponents注入新类，也无法覆盖插件已声明的高优先级规则
必须用 @layer base 覆盖焦点和边框样式
想改 focus ring 颜色、禁用态灰度、或 input 边框粗细，唯一可靠路径是在你的主 CSS 文件（如 app.css）里用 @layer base 包裹自定义规则。否则插件的 base 层样式会把你写的工具类（如 focus:ring-red-500）覆盖掉。
- 聚焦选择器要严格匹配插件原生写法：
[type='text']:focus、select:focus、textarea:focus，不能简写成input:focus - 别直接写
outline: none——这会让键盘用户失去焦点指示；改用outline: 2px solid var(--tw-ring-color)并重设 CSS 变量 - Safari 下
select箭头残留？补一句background-image: url("data:image/svg+xml,..."); background-repeat: no-repeat; background-position: right 0.75rem center;
peer-checked 不生效？检查结构和定位上下文
peer-checked:bg-blue-500 没反应，90% 是结构或定位问题，不是 class 写错。
立即学习“前端免费学习笔记（深入）”；
-
peer元素必须是兄弟节点中紧邻的前一个元素，且必须是原生<input type="checkbox">，不能套在<div> 里再加 class <li>父容器没设 <code>relative？peer-checked:xxx触发的伪元素（如勾选标记）会因定位上下文缺失而偏移或不可见 - 插件已把 checkbox 设为
appearance-none和全透明，你得自己用before:content-[""] absolute画勾选图标 - 别忘了保留
:checked语义——屏幕阅读器依赖它，光靠视觉样式无法通过可访问性检测
最难的部分从来不是让控件看起来像设计稿
是让它在高对比度模式下有足够对比、键盘 tab 时有清晰焦点环、VoiceOver 下正确播报“已选中/未选中”。@tailwindcss/forms 只清掉了浏览器默认 UI，但可访问性保障得你亲手补全：比如为自定义 checkbox 添加 aria-checked、为 focus ring 设置最低 3:1 对比度、确保所有交互状态都有视觉反馈。这些细节不会出现在设计稿里，但会决定真实用户的使用门槛。
