@tailwindcss/forms 不支持 theme 配置，所有样式硬编码在插件内；自定义需用 @layer base 覆盖 css，注意可访问性与语义完整性。
直接改 @tailwindcss/forms 的默认样式不现实——它本身不提供可配置的 theme 选项，所有样式都硬编码在插件内部；真要自定义，得绕过配置层，用 CSS 覆盖。
为什么 tailwind.config.js 里 extend.forms 根本没用
因为 @tailwindcss/forms 插件压根没暴露 forms 这个 theme key。你在 theme.extend 里写 forms: { ... } 不会生效，Tailwind 编译器完全忽略它。这不是你配错了，是插件设计如此。
- 插件只注入 base 层样式，不参与 theme 解析流程
- 所有重置逻辑写死在 PostCSS 插件代码里，比如
input[type="checkbox"]的appearance: none和透明背景 - 想改颜色、边框、焦点环？必须自己写 CSS，且得放在
@layer base里，否则被插件样式覆盖
如何安全覆盖 input/select/checkbox 的焦点和边框样式
插件默认给 input、select、textarea 等加了 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2，但这是工具类，不是源码。你要换颜色或去掉外轮廓，不能删 class，得从源头覆盖 CSS 变量或规则。
- 在
app.css或主样式文件中，用@layer base包裹自定义规则 - 聚焦样式必须匹配插件选择器优先级，例如：
[type='text']:focus, [type='email']:focus, select:focus - 别直接写
outline: none——这会让键盘用户失去焦点指示，改用outline: 2px solid var(--tw-ring-color)并重设--tw-ring-color - Safari 下
select箭头残留？补一句background-image: url("data:image/svg+xml,...")+bg-no-repeat bg-right-3
checkbox/radio 自定义颜色为什么 peer-checked 不生效
常见现象：加了 peer-checked:bg-blue-500 没反应。根本原因不是 class 写错，而是结构或定位缺失。
-
peer要求复选框必须是兄弟节点中前一个元素，且peer元素本身得是<input type="checkbox">，不能套在div里再加 class - 父容器没设
relative？peer-checked:xxx类不会触发定位上下文，导致伪元素偏移失效 - 插件已把原生 checkbox 设为
appearance-none和全透明，你得自己用before:content-[""]+absolute画勾选标记 - 别忘了保留
:checked语义，屏幕阅读器依赖它，光靠视觉样式不够
最难的部分从来不是让 checkbox 看起来像设计稿，而是让它在高对比度模式下有足够对比、在键盘 tab 时有清晰焦点、在 VoiceOver 下正确播报状态——@tailwindcss/forms 只清掉了浏览器差异，剩下的可访问性责任，得你一行 CSS 一行 JS 去填。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
