focus:ring鼠标点击无反应是因为它默认绑定:focus-visible而非:focus，这是tailwind的可访问性设计；需用focus:outline-none focus:ring-2显式启用，并推荐在@layer base中用box-shadow和css变量统一管控。
focus:ring 为什么鼠标点击没反应
因为 focus:ring 默认绑定的是 :focus-visible，不是 :focus。这是 Tailwind 基于可访问性做的默认行为：键盘 Tab 导航时显示光晕，鼠标点击则隐藏。所以你点 <input> 却没看到环，不是 bug，是设计如此。
要让鼠标点击也触发，必须显式写 focus:outline-none focus:ring-2，且顺序不能错——outline-none 必须在前，否则原生虚线框和 ring 叠在一起，既难看又影响可访问性。
-
focus:ring-2单独用 → 不生效（缺:focus上下文） -
ring-2直接写 → 完全无效（没加伪类前缀） - 漏掉
focus:outline-none→ 虚线框 + ring 同时出现，视觉混乱
@layer base 是唯一能全局覆盖的地方
@tailwindcss/forms 插件注入的样式走的是 @layer base，想改就必须在同一图层里写更高优先级规则。HTML 中一个个加 focus:ring-blue-500 类，后期维护成本高、易遗漏，且无法统一主题色。
在主 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 更可控
ring 工具类依赖伪元素，会和 border 冲突，还耦合 ring-inset 行为；而 box-shadow 直接作用于元素本身，无副作用，参数也更直观。
推荐写法：
: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; }
移动端:focus光晕容易失效怎么办
iOS Safari 在软键盘弹出时经常不触发 :focus，不是 CSS 写错了，而是浏览器行为差异。真机测试时加一句 input:focus { outline: red solid 2px; }，如果红框也不出现，说明根本没进 :focus 状态。
稳妥做法是双写：
input:focus,
input:focus-visible {
outline: none;
box-shadow: 0 0 6px 2px rgba(0, 120, 255, 0.25),
0 0 12px rgba(0, 120, 255, 0.1);
transition: box-shadow 0.2s ease;
}
模糊值别超过 20px，低端 Android 会掉帧；iOS 对大模糊渲染偏保守，容易发虚；深色背景上透明度低于 0.1 就看不清，建议调高到 0.25。
Tailwind 用户注意：ring-1 rounded-full 看似能一起生效，实际 ring 默认没有圆角，rounded-full 对它无效——结果就是光晕是方的，输入框是圆的。用 box-shadow 就没这问题。
最复杂的一点其实是「什么时候该用 :focus，什么时候该用 :focus-visible」——不是非此即彼，而是按交互意图分层控制：键盘导航必须可见，触屏点击是否显示则取决于产品可访问性策略，这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
