tailwind.config.js 中 extend.forms 不生效是因为 @tailwindcss/forms 插件未暴露 forms theme key，其样式硬编码于 postcss 插件内，不走 theme 解析流程；需通过 @layer base 覆盖焦点/边框样式，注意可访问性与定位要求。
为什么 tailwind.config.js 里 extend.forms 不生效
因为 @tailwindcss/forms 插件根本没暴露 forms 这个 theme key。你在 theme.extend 里写 forms: { ... }，Tailwind 编译器直接忽略——这不是配错，是插件设计如此。它所有样式都硬编码在 PostCSS 插件内部，不走 theme 解析流程。
如何安全覆盖 input/select/checkbox 的焦点和边框样式
插件默认给 input、select、textarea 加了 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2，但这是工具类，不是源码。要换颜色或去掉外轮廓，必须从 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
为什么 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 颜色时最容易忽略的可访问性问题
最难的部分从来不是让 checkbox 看起来像设计稿，而是让它在高对比度模式下有足够对比、在键盘 tab 时有清晰焦点、在 VoiceOver 下正确播报状态。@tailwindcss/forms 只清掉了浏览器默认样式，其余全靠你补全。比如：
- 焦点环颜色必须满足 WCAG 至少 3:1 的对比度（尤其深色背景）
- 勾选标记的 SVG 必须带
aria-hidden="true"，避免重复播报 - 禁用态要用
disabled:opacity-50 disabled:cursor-not-allowed，同时确保aria-disabled="true"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
