默认 focus:ring 无反应是因为它基于 :focus-visible，而鼠标点击聚焦的输入框不触发该伪类；需改用 :focus 行为并配合 focus:outline-none 避免虚线框叠加。
为什么默认的 focus:ring 没反应？
Tailwind 的 focus:ring 类默认只在元素获得焦点且不是由鼠标点击触发时生效（即满足 :focus-visible 逻辑），这是为了可访问性优化。但表单输入框（如 <input>、<textarea></textarea>）常被鼠标点击聚焦，此时 :focus-visible 不匹配，focus:ring 就不会应用。
解决方法是显式覆盖为 :focus 行为：
- 用
focus:ring配合focus:outline-none（否则浏览器默认虚线框和 ring 会叠加） - 确保元素可聚焦：原生
<input>默认可聚焦，但自定义组件需带tabIndex或使用语义化标签 - 检查是否被其他 CSS（比如重置样式或第三方库）清除了
outline却没补ring
focus:ring-blue-500 和 focus:ring-2 的顺序重要吗？
重要。Tailwind 按类名顺序生成 CSS，而 ring 相关类依赖基础样式（如 ring-offset、ring-opacity）才能正确渲染。如果只写 focus:ring-blue-500，它内部已包含 ring-1 和 ring-blue-500，但若想加粗边框，必须显式写 focus:ring-2 —— 且要放在颜色类之后，否则会被覆盖：
<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none">
反例（无效）：focus:ring-blue-500 focus:ring-2 —— 因为 ring-blue-500 自带 ring-1，后写的 ring-2 会被前面生成的 ring-1 覆盖（CSS 同权重下后者优先，但 Tailwind 是按类名顺序写入 CSS 规则，ring-blue-500 的规则在 ring-2 之后，所以它赢了）。
如何让 focus ring 只出现在输入框内侧而不外扩？
默认 ring 是围绕元素外边缘绘制的，看起来像“发光”。要改成内凹效果（类似传统 border），得配合 ring-inset：
-
focus:ring-inset必须与focus:ring系列类同时存在才生效 - 通常还需搭配
focus:ring-white和focus:ring-opacity-50控制视觉层次 - 注意：内凹 ring 仍需要
ring-offset背景色来隔离，否则可能透出父容器颜色；建议统一设ring-offset-white（或与背景一致的颜色）
<input class="ring-offset-white focus:ring-inset focus:ring-2 focus:ring-blue-500 focus:outline-none">
移动端 Safari 上 focus ring 不显示怎么办？
iOS Safari 对 :focus-visible 支持较弱，且默认禁用非可点击元素的焦点高亮。即使 <input> 是可聚焦的，某些版本仍会跳过 focus:ring。
稳妥做法是强制启用：
- 加
focus:ring类的同时，补上focus:ring-opacity-100（避免 opacity 被设为 0） - 确认没有全局 CSS 设置
*:focus { outline: none }却没配 ring - 对 iOS 特别处理：可加
class="focus:ring focus:ring-blue-500 focus:outline-none [data-ios]:focus:ring"，再用 JS 在加载时检测 UA 并添加data-ios属性
更轻量的方案是直接用 focus:border-blue-500 替代 —— 虽然不是 ring，但在移动端兼容性零问题，且用户感知一致。
实际项目里最容易漏的是 focus:outline-none 和 ring-offset-* 的组合，缺一不可。ring 不是独立边框，它是一套三层叠加系统（offset 背景 + ring 边框 + 元素自身），少一层，视觉就错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
