:focus-ring 默认绑定 :focus-visible，故鼠标点击不显示；正确写法是 focus:outline-none focus:ring-2 focus:ring-blue-500，且需在 @layer base 中统一覆盖表单元素焦点样式并处理深色模式。
focus:ring 为什么在鼠标点击时没反应
默认 focus:ring 实际绑定的是 :focus-visible，而非 :focus——这是 Tailwind 为可访问性做的默认行为：键盘聚焦才显示环，鼠标点击则不触发。表单输入框（<input>、<textarea></textarea>）绝大多数场景由鼠标触发，所以环“消失”是预期行为，不是 bug。
解决办法很简单：不用 focus:ring，改用显式 :focus 规则。但必须同步移除原生 outline，否则虚线框 + ring 叠加，视觉错乱且损害可访问性。
- ✅ 正确写法：
focus:outline-none focus:ring-2 focus:ring-blue-500 - ❌ 错误写法：
ring-2 ring-blue-500（漏focus:前缀）、focus:ring-2（没关 outline） - ⚠️ 注意：
outline-none必须和focus:ring同时出现，不能只写在非 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就自动更新全部
appearance-none 不是万能解，但它必须配合尺寸重置
统一输入框外观的前提是先“清空”浏览器原生样式，但 appearance-none 只是第一步。不同 type 的 <input> 默认 padding、line-height、height 完全不同，尤其 date、number、search 在各浏览器表现割裂。
真正起作用的组合是：
-
appearance-none（隐藏原生控件） -
pr-8（为date右侧日历图标留空间） -
py-2 px-3（强制统一内边距，不能只靠h-10） -
leading-tight（防止文字贴顶或下沉） -
[&::-webkit-inner-spin-button]:appearance-none（Chrome 数字输入的上下箭头）
这些规则不能只靠工具类拼凑，必须通过 @layer components 抽成 .form-input 类，并确保它被 PurgeCSS 保留（即包裹在 @layer components 块内）。
全局 ring 颜色失效的三个隐形原因
即使写了 @layer base 并用了 theme()，ring 颜色仍可能不生效，常见于：
-
preflight: false后没补input:focus基础规则——Tailwind 关掉默认 Reset 后，原生 focus outline 会回来，压住你的box-shadow - 第三方 UI 库（如 Headless UI、DaisyUI）自带 focus 样式，CSS 优先级更高，需检查 DevTools 的 computed styles
- 深色模式未适配：
dark:focus:ring-indigo-400必须显式写出，theme()不自动处理暗色变体
最稳的做法：把 box-shadow 规则写死（比如 0 0 0 2px #4f46e5），绕过 theme() 解析失败或变体缺失的风险；等项目稳定后再回归主题函数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
