@tailwindcss/forms 不支持 theme.extend.forms 自定义，因其样式硬编码在插件内、不参与 tailwind 主题解析；必须用 @layer base 中的 css 覆盖，且需兼顾可访问性与浏览器兼容性。
直接改 @tailwindcss/forms 的默认样式不现实——它压根没暴露 forms 这个 theme key，你在 tailwind.config.js 的 theme.extend 里写任何东西都不会生效。真要自定义，必须用 CSS 覆盖，且得放在 @layer base 里，否则优先级不够。
为什么 extend.forms 在 tailwind.config.js 中完全无效
@tailwindcss/forms 插件所有样式都硬编码在 PostCSS 插件内部，不参与 Tailwind 的 theme 解析流程。它只向 @layer base 注入一组固定规则，比如 input[type="checkbox"] { appearance: none; background: transparent; }。你配置的 theme.extend.forms 不会被读取，编译器直接跳过。
- 插件不声明
forms这个 theme key，Tailwind 就不会为它生成任何工具类 -
theme.extend只影响@apply和工具类生成，不影响插件注入的 base 层 CSS - 试图通过
focus:ring-green-600逐个覆盖？可行但不可维护，尤其当项目有几十个表单页时
如何安全覆盖 input、select、textarea 的焦点环和边框
插件默认给大多数输入控件加了 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2，但这只是工具类示例，不是源码逻辑。你要换颜色或去掉外轮廓，不能删 class，得从 CSS 层面重置。
- 在
app.css或主样式文件中，用@layer base包裹自定义规则 - 选择器必须匹配插件原始优先级，例如：
[type='text']:focus、select:focus、textarea:focus - 别写
outline: none——这会让键盘用户失去焦点指示；改用outline: 2px solid var(--tw-ring-color)并重设--tw-ring-color - Safari 下
select箭头残留？补一句background-image: url("data:image/svg+xml,..."); background-repeat: no-repeat; background-position: right 0.75rem center;
为什么 peer-checked:bg-blue-500 没反应
常见现象是加了类但视觉无变化，问题几乎从来不是 class 写错，而是结构或定位缺失。
-
peer要求复选框必须是兄弟节点中前一个元素，且必须是原生<input type="checkbox">，不能套在<div> 里再加 class <li>父容器没设 <code>relative？peer-checked:xxx类不会触发定位上下文，导致伪元素偏移失效 - 插件已把原生 checkbox 设为
appearance-none和全透明，你得自己用before:content-[""] + absolute画勾选标记 - 别忘了保留
:checked语义——屏幕阅读器依赖它，光靠视觉样式不够
最难的部分从来不是让 checkbox 看起来像设计稿，而是让它在高对比度模式下有足够对比、在键盘 tab 时有清晰焦点、在 VoiceOver 下正确播报状态——@tailwindcss/forms 只清掉了浏览器默认样式，可访问性得你自己兜底。
