输入框聚焦样式需配合 focus:outline-none、focus:ring-2 和 focus:ring-offset-2 才能正确生效，否则会出现双轮廓、偏移或深色模式不可见等问题；推荐组合为 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400。
直接用 focus: 类就能设置输入框聚焦时的样式，但光写 focus:ring-2 往往没效果，甚至出现双轮廓、环偏移或深色模式下看不见等问题。关键不在“加不加”，而在“怎么配”。
必须配合 outline-none 和 ring-offset-
浏览器默认会给聚焦元素加 outline，而 Tailwind 的 ring 是用 box-shadow 模拟的焦点环，两者不自动覆盖。不显式清除原生 outline，就会叠加显示，视觉混乱。
- 写
focus:outline-none去掉默认虚线框 - 加
focus:ring-offset-2预留内边距，否则环会紧贴输入框边缘，看起来像没生效 - 环颜色建议用
focus:ring-blue-500（浅色模式）+dark:focus:ring-blue-400（深色模式），确保 WCAG 对比度达标
输入框推荐的标准组合
常见输入框（<input type="text">、<textarea>）建议这样写：
class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200"
立即学习“前端免费学习笔记（深入）”；
-
focus:ring-offset-2和focus:ring-2必须成对出现，顺序无关但缺一不可 - 如果希望环向内收缩（避免撑高容器），可换用
focus:ring-inset focus:ring-1 -
transition-all duration-200让颜色和阴影变化更平滑，提升交互感
别用 focus:，优先用 focus-visible:
鼠标点击输入框时，:focus-visible 默认不触发，所以 focus:ring- 看似“没反应”。这是设计行为，不是 bug——目的是避免鼠标用户看到多余焦点环。
- 如需统一响应所有聚焦方式（包括鼠标点），就用
focus:outline-none focus:ring-2... - 如只希望键盘导航时显示焦点环（更符合可访问性规范），应改用
focus-visible:outline-none focus-visible:ring-2... - 不要混用
focus:和focus-visible:，否则鼠标点击后可能闪一下环
注意 tabindex 和可聚焦性
自定义组件（比如用 <div> 模拟输入框）必须能获得焦点，否则 focus: 类完全无效。
- 原生
<input>、<textarea>默认可聚焦，无需额外设置 - 若用
<div contenteditable="true">或封装的组件，需加tabindex="0" - 避免使用
tabindex="1"或更高值，会破坏自然 Tab 顺序，影响屏幕阅读器体验
