focus:ring默认绑定:focus-visible而非:focus，故鼠标点击不生效是可访问性设计；需用focus:outline-none focus:ring-2组合并全局用@layer base配合CSS变量统一管控。
单独加 focus:outline-none 或只写 focus:ring-2 都不能算完成定制——前者让键盘用户失焦，后者在鼠标点击时不生效，且容易和原生 outline 叠加出视觉污染。
为什么 focus:ring 默认不响应鼠标点击？
Tailwind 的 focus:ring 类实际绑定的是 :focus-visible 伪类，不是 :focus。这是为可访问性做的默认区分：键盘 Tab 时显示环，鼠标点击后自动隐藏，避免干扰视觉流。
- 想让鼠标点击也触发焦点环，必须显式使用
focus:outline-none focus:ring-2组合 - 漏掉
focus:outline-none会导致浏览器原生虚线框 + ring 双重叠加，尤其在 Chrome/Safari 下明显割裂 -
ring-2本身无状态前缀，写成ring-2（没加focus:）完全不生效
如何全局统一控制输入框的 focus ring 样式？
别在每个 <input> 上手动加 focus:ring- 类——维护成本高、易遗漏、无法响应暗色模式切换。
- 在主 CSS 文件（如
src/index.css）中，紧接@tailwind base后添加@layer base块 - 覆盖所有关键类型：
input:focus、select:focus、textarea:focus、[type='date']:focus、[type='number']:focus等，Chrome/Safari 对这些类型有独立渲染逻辑 - 用
box-shadow替代ring更可控：不依赖伪元素、不与border冲突、无ring-inset耦合风险 - 颜色必须通过
theme('colors.xxx')或 CSS 变量引用，例如box-shadow: 0 0 0 2px theme('colors.indigo.500')
focus ring 在深色背景或圆角容器上为何“糊边”或“不圆”？
focus:ring 是通过伪元素实现的绝对定位环，默认不继承宿主的 border-radius，也不感知父容器背景色，导致 offset 错位或对比度不足。
- 圆角容器（如
rounded-full按钮）必须同步加focus:rounded-full，否则 ring 仍是直角 -
focus:ring-offset-的颜色（如focus:ring-offset-white）必须匹配父容器背景色；若容器是bg-gray-900，却用ring-offset-white，环会像贴在黑底上的一圈灰晕 - 深色背景下，
focus:ring-blue-500（#3b82f6）在#1e293b上对比度仅 ~2.4:1，低于 WCAG 要求的 3:1，应改用focus:ring-blue-400或定义变量动态切换 - iOS Safari 对
<input>有强制蓝光，一旦启用 ring，原生光消失；务必用focus:ring-2 focus:ring-offset-2，避免ring-1或低 opacity
真正卡住人的从来不是 class 怎么写，而是 ring 该外扩还是内缩、offset 颜色是否随主题实时更新、以及真机上关闭“智能反转”后能否一眼识别——这些没法靠文档推导，得对着键盘 Tab 和手指点按反复调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
