tailwind 默认不支持 hover:bg-[#xxx] 等交互状态的任意值语法，因其 jit 编译器仅基于 theme 配置生成类，未注册的颜色值不会被解析；需通过 theme.extend.colors 添加命名色或确保 content 扫描覆盖且启用 arbitrary value 支持。
Tailwind 默认不提供 hover/focus/active 等交互状态的「自定义值」支持，所有交互变体（如 hover:bg-blue-600）都必须基于已配置的 theme.colors 和 theme.backgroundColor 等基础值生成——你不能在 class 里写 hover:bg-[#3b82f6]（除非启用 jit: true 并开启 darkMode: 'class' 等配套配置）。
为什么 hover:bg-[#xxx] 在默认配置下不生效
Tailwind 的 JIT 编译器（v3.0+ 默认启用）只按需生成你实际用到的类，但颜色值必须出现在 theme.extend.colors 或 theme.colors 中，否则不会被解析为合法的 background color 类。直接写十六进制色值属于「任意值（arbitrary value）」，需要显式允许。
- 未启用
content扫描时，hover:bg-[#3b82f6]根本不会被识别 - 即使启用了 JIT，
bg-[#3b82f6]是合法的，但hover:bg-[#3b82f6]要求hover变体对 arbitrary value 生效——这依赖于corePlugins.preflight和variants配置（v3.3+ 已弃用variants，改由plugins控制） - 最简解法：在
tailwind.config.js的theme.extend.backgroundColor里加一个命名色，比如'brand-hover': '#3b82f6'，再用hover:bg-brand-hover
如何安全启用任意值交互类（如 hover:bg-[#...]）
从 v3.2 开始，Tailwind 原生支持 arbitrary value，但交互变体默认不自动扩展到任意值——你需要确认两件事：
-
content数组必须包含所有使用了 arbitrary value 的模板路径，例如content: ['./src/**/*.{js,ts,jsx,tsx}'] - 确保没有禁用
hover变体：variants: { extend: { backgroundColor: ['hover', 'focus'] } }已过时；v3.3+ 应检查corePlugins是否保留hover（默认开启） - 任意值语法仅对部分属性有效：
bg-、text-、border-支持，但grid-cols-[1fr_2fr]这类复杂值需配合plugin()手动注册
✅ 正确示例（v3.4+）：
className="hover:bg-[#3b82f6] focus:ring-[3px] active:scale-[0.98]"
⚠️ 注意：scale-[0.98] 是合法的，但 scale-[.98]（缺前导零）会编译失败。
用 plugin() 注册自定义交互反馈逻辑
当标准变体不够用（比如需要 pressed、drag-over、或带过渡延迟的 hover:transition-delay-150），就得靠插件。Tailwind 不内置 pressed，但你可以模拟：
- 在
tailwind.config.js的plugins数组中添加：
require('tailwindcss/plugin')(({ addVariant }) => {
addVariant('pressed', '&:active, &.pressed')
})
- 然后就能用
pressed:bg-red-500；注意它不会自动触发 transition，需额外加transition类 - 若要支持嵌套伪类（如
&:hover &:focus），得用addVariant的回调函数返回 selector 字符串，不能只靠字符串拼接 - 避免在插件里重复定义已有变体（如重写
hover），会导致 JIT 缓存冲突
交互类性能与 SSR 兼容性陷阱
大量使用 arbitrary value 交互类（尤其是带 calc() 或渐变的）会让 JIT 编译时间明显上升，且可能破坏服务端渲染时的 class 匹配一致性。
- Next.js / Nuxt 等框架中，若
content没覆盖动态生成的 class 字符串（如hover:bg-${color}），SSR 渲染出的 HTML 就不含对应 CSS 规则，导致首次交互无样式 - 推荐做法：把高频交互色抽成 theme token，用
hover:bg-primary-600替代hover:bg-[#...]；仅对真正动态的颜色（如用户主题色）走 arbitrary value +style内联补充 -
group-hover和peer-focus等组合变体，要求父/兄弟元素正确标记group或peer，漏掉 class 就完全失效，调试时建议用浏览器 DevTools 的 :hover 强制触发看是否匹配
真正麻烦的不是怎么写 hover，而是哪些交互状态该由 Tailwind 管，哪些该交给 :has() 或 JS 控制——比如「鼠标悬停子项时高亮整个卡片」这种跨层级反馈，group-hover 有局限，硬塞 arbitrary value 又难维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
