根本原因是浏览器ua样式表（如chrome的outline:auto）优先注入且具强制性，tailwind focus工具类虽权重更高但晚于ua生效；须用@layer base在@tailwind base前声明input:focus{outline:none;box-shadow:...}并配具体选择器接管。
不是 Tailwind 的 focus:ring-blue-500 没写对，而是它根本没机会生效——浏览器原生的 :focus-visible 或 :focus 伪类样式（比如 Chrome 对 input 的默认焦点轮廓）在特异性上压过了 Tailwind 工具类，且加载时机更早。
为什么 focus: 类总被浏览器“抢走”焦点样式？
浏览器对表单控件有内置焦点表现逻辑，例如 Chrome 会给 input[type="text"] 自动加上 outline: auto，这个规则来自用户代理样式表（UA stylesheet），权重是 (0,0,0,1)；而 Tailwind 的 focus:ring-blue-500 编译后是 input:focus { --tw-ring-color: #3b82f6; }，选择器是 input:focus（权重 (0,0,1,1)），看似更高，但实际：
- UA 样式表在 CSSOM 解析时最先注入，且部分浏览器（如 Safari）对
outline有强制渲染逻辑，不完全受 CSS 层叠控制 - Tailwind 的
focus:工具类依赖@layer utilities，默认排在@tailwind base（含 preflight）之后，但 UA 样式表不在这个层叠链里，属于“外部权威” - 如果你用了
@tailwindcss/forms插件，它会主动重置outline: 2px solid transparent，但这个重置本身也可能被后续 UA 行为覆盖（尤其在未聚焦状态下触发 focus-visible 切换时）
@layer base 覆盖 UA 焦点样式必须写对位置和选择器
想真正接管焦点表现，不能只靠工具类，得用 @layer base 显式声明，并确保它在所有 Tailwind 层之前生效：
-
@layer base块**必须放在@tailwind base指令之前**，否则会被 preflight 规则覆盖（比如 preflight 里的input { outline: none; }会干掉你写的input:focus） - 选择器要足够具体：只写
input:focus不够稳，推荐用input:focus:not(:focus-visible), input:focus-visible分开控制，或直接锁定类型：input[type="text"]:focus, textarea:focus, select:focus - 必须显式清除 UA outline 并接管 ring：例如
input:focus { outline: none; box-shadow: 0 0 0 3px var(--tw-ring-color, theme('colors.blue.500')); }
第三方插件（如 @tailwindcss/forms）让焦点样式更难控
该插件默认注入的焦点规则，和浏览器 UA 行为、你自己写的 @layer base 三者之间存在微妙竞争关系：
- 插件生成的
input:focus规则在@tailwind components层，权重虽高但晚于 UA 样式，也晚于你放在@layer base的规则（只要位置对） - 插件默认启用
focus-visible逻辑，但若你的项目禁用了focus-visiblepolyfill 或未配prefers-reduced-motion，会导致焦点样式在键盘导航时消失、鼠标点击时又出现，看起来“随机失效” - 安全做法是：关掉插件的自动 focus 注入（在
tailwind.config.js中设plugins: [require('@tailwindcss/forms')({ strategy: 'class' })]），然后全量用自定义@layer base控制
最常被忽略的一点：不是所有焦点样式“不生效”都源于 CSS 冲突——检查是否启用了 focus-visible 检测逻辑，以及当前交互方式（鼠标 vs 键盘）是否触发了不同伪类。DevTools 的 Computed 面板里看最终生效的 outline 或 box-shadow 来源，比猜选择器顺序更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
