Tailwind中input:focus高亮失效，需检查focus插件是否启用、outline是否被重置、是否使用focus:ring替代focus:border，并考虑focus-visible降级、iOS适配及JS防抖。
tailwind 中 input:focus 高亮没反应？先确认是否启用了 focus 插件
默认 Tailwind v3+ 已启用 focus 变体，但如果你用的是自定义配置（比如精简了 variants），可能被关掉了。检查 tailwind.config.js 中是否有类似以下禁用行为：
module.exports = {
content: [...],
theme: { ... },
variants: {
extend: {
// 如果这里显式删掉了 focus，就会失效
ringWidth: ['focus'],
ringColor: ['focus'],
borderColor: ['focus'],
}
}
}更稳妥的做法是：直接使用 focus:ring 系列工具类，它们比 focus:border 更可靠，因为原生 input 的 focus 样式常被浏览器默认 outline 覆盖。
focus:ring 不生效？可能是 outline 被重置或层级冲突
Tailwind 的 focus:ring 默认依赖 outline: none 配合 ring 模拟高亮。如果项目里全局写了 * { outline: none }，又没补 ring，就会“消失”。常见修复方式：
-
focus:ring-2 focus:ring-blue-500 focus:ring-offset-2—— 同时加偏移避免紧贴边框 - 若已有
outline-none，必须配ring，否则视觉上什么也不出现 - 确保没有更高优先级的 CSS 强制覆盖，比如
input:focus { outline: 0 !important; }却没给 ring
想只在键盘 focus 时高亮？用 focus-visible 替代 focus
鼠标点击输入框时也触发 :focus，但用户可能不希望这样。Tailwind 支持 focus-visible（需启用 focusVisible 变体），它只在键盘 tab 进入时激活：
立即学习“前端免费学习笔记（深入）”；
<input type="text" class="focus-visible:ring-2 focus-visible:ring-purple-400 focus-visible:ring-offset-1" />
注意：focus-visible 在旧版 Safari 或未开启对应 polyfill 时可能不工作；生产环境建议搭配 @layer base 降级：
@layer base {
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid #8b5cf6;
outline-offset: 2px;
}
}移动端 focus 高亮弱？需要适配 iOS Safari 的怪癖
iOS Safari 对 input 的 focus 样式有额外限制：默认会放大、加阴影，且 ring 可能被裁剪。解决方法包括：
- 加
class="focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"控制透明度，避免过重 - 避免用
focus:shadow，iOS 上 shadow 常被忽略或错位 - 必要时加
class="focus:outline-none"并确保ring足够明显（如ring-4） - 测试真机，模拟器有时不反映真实 focus 行为
最易被忽略的是：iOS 下软键盘弹出会触发 resize 和 scroll，导致 focus 样式短暂闪烁或错位，这时候不能只靠 CSS，得结合 JS 监听 focusin 做防抖重绘。
