tailwind 的 focus:ring 默认绑定 :focus-visible 而非 :focus，故鼠标点击不显示焦点环是可访问性设计而非 bug；需用 focus:outline-none focus:ring-2 显式启用，并推荐全局 @layer base 中用 box-shadow + css 变量统一管控。
focus:ring 为什么鼠标点击不生效
因为 Tailwind 的 focus:ring 默认绑定的是 :focus-visible，不是 :focus。这是可访问性优化行为：键盘 Tab 导航时显示环，鼠标点击则隐藏——所以你点 input 却没看到蓝环，不是 bug，是设计如此。
要让鼠标点击也触发焦点环，必须显式用 :focus 规则，并同步移除原生 outline，否则虚线框 + ring 叠在一起，既难看又影响可访问性。
✅ 正确写法：focus:outline-none focus:ring-2 focus:ring-blue-500❌ 错误写法：focus:ring-2（漏 outline-none）、ring-2（没加 focus: 前缀）- 别只在单个元素上加类，全局覆盖才可靠
@layer base 是唯一能覆盖 forms 插件的地方
@tailwindcss/forms 插件注入的默认样式走的是 @layer base，想改就必须在同一图层里写更高优先级规则。任何在 HTML 里一个个加 focus:ring- 类的做法，后期维护成本高、易遗漏。
在主 CSS 入口（如 src/index.css）中，紧接 @tailwind base 后添加：
@layer base {
input:focus,
select:focus,
textarea:focus,
[type='date']:focus,
[type='number']:focus {
outline: none;
box-shadow: 0 0 0 2px theme('colors.indigo.500');
}
}
-
[type='date']和[type='number']容易被忽略，但它们在 Chrome/Safari 下有独立原生控件，不列出来就不生效 - 用
box-shadow比ring更可控：不依赖伪元素、不和 border 冲突、无ring-inset的耦合陷阱 -
theme('colors.indigo.500')直接复用tailwind.config.js配置，改一处全更新
用 CSS 变量接管焦点环颜色，而不是硬编码
把焦点环颜色抽成变量，才能支持主题切换、暗色模式、设计系统对齐。别写死 #3b82f6，而是定义 --form-focus-ring-color，并在 :focus 中引用。
示例：
:root {
--form-focus-ring-color: #3b82f6;
}
@layer base {
input:focus, select:focus, textarea:focus {
outline: none;
box-shadow: 0 0 0 2px var(--form-focus-ring-color);
}
}
- 变量必须定义在
:root，否则无法被所有组件继承 - 深色模式下可直接覆盖：
.dark :root { --form-focus-ring-color: #60a5fa; } - 别用
color或border-color控制环——它们不生效；box-shadow是唯一稳定路径
为什么不用 :focus-visible 替代 :focus 做焦点环
:focus-visible 是为键盘用户服务的，它不会响应鼠标点击。如果你只靠它控制环，那绝大多数表单交互（鼠标点 input、点 select、点 textarea）就完全没反馈了。
正确策略是分层处理：
- 用
:focus+box-shadow提供基础焦点反馈（鼠标/键盘都触发） - 用
:focus-visible+outline做键盘专属强化（需搭配outline: none在:focus下，否则不接管） - 鼠标 hover 仍需单独写
:hover，:focus-visible不覆盖它
真正容易被忽略的是：测试时必须用键盘 Tab 切换，不能只点鼠标——很多焦点逻辑问题只在键盘流中暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
