输入框聚焦样式不生效主因是:focus-visible与:focus行为差异及ring被outline覆盖；需显式用focus:ring-2 focus:ring-blue-500 focus:outline-none，并配ring-offset和focus:ring-inset以确保正确渲染。
输入框聚焦样式不生效，大概率不是代码写错了，而是:focus-visible和:focus行为没对上，或者ring被outline盖住了。
focus:ring在input上默认不触发
Tailwind 的 focus:ring 类默认基于 :focus-visible，而鼠标点击输入框时浏览器通常不认为这是“键盘导航场景”，所以 :focus-visible 不匹配，focus:ring 就压根不会应用。
- 临时验证：给
<input>加个tabindex="0"，再用 Tab 键聚焦——如果这时 ring 出来了，就坐实是:focus-visible限制问题 - 正解是显式用
focus:而非依赖默认行为：focus:ring-2 focus:ring-blue-500 focus:outline-none - 别只写
focus:ring-blue-500——它自带ring-1，想加粗必须显式写focus:ring-2，且顺序得在颜色类之后，否则被覆盖
outline 和 ring 叠在一起导致“看不见”
浏览器对 <input> 有原生 outline（虚线框），而 focus:ring 是用 box-shadow 模拟的，两者互不干扰、直接叠加。结果就是虚线框+发光环，视觉混乱甚至互相抵消。
- 必须配
focus:outline-none，否则永远有双焦点样式 - 但删了 outline 后，可访问性会降级——确保同时提供其他视觉反馈（比如 border-color 变化或背景色微调）
- 移动端 Safari 有时连
focus:outline-none都不认，可补focus:ring-opacity-100强制显示
ring-offset没设，环贴着边缘像没生效
ring 是阴影，不是边框；它需要预留内边距空间（即 ring-offset），否则会紧贴元素边缘，尤其在圆角按钮或带 padding 的输入框里，看起来就像没加 ring。
- 必须写
ring-offset-white（或与背景一致的颜色） +focus:ring-offset-2，否则focus:ring-2很可能“消失” - 输入框推荐加
focus:ring-inset，让环向内收，避免撑高容器高度 - 如果输入框在
overflow-hidden容器里（比如弹出层），ring 会被截断——此时要给父容器加ring-offset-4扩大预留区
最常被忽略的是：ring 渲染效果高度依赖元素自身的 border-radius、padding 和是否用了 transform。同一个 focus:ring-2 focus:ring-blue-500 在 <button></button> 和 <input> 上表现不同，不是 bug，是 box-shadow 的天然特性。别指望一套类名无脑复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
