Tailwind 默认不支持 hover:focus:active 等多伪类链式组合，因其伪类前缀为单层叠加而非嵌套逻辑；需通过插件自定义变体（如 focus-hover）或 JS 控制状态，且三重组合实际极少必要。
hover:focus:active 这类多伪类组合在 Tailwind 里不能直接写
Tailwind 默认不支持 hover:focus:active 这种链式伪类写法——它会直接忽略中间的 :focus 和 :active，只保留最后一个（比如 active:hover 实际被解析为 :hover）。根本原因是 Tailwind 的伪类前缀是“单层叠加”，不是 CSS 原生选择器的嵌套逻辑。
常见错误现象：class="hover:bg-blue-500 focus:bg-yellow-400 active:bg-red-500" 看似覆盖了所有状态，但鼠标悬停+点击瞬间，active 样式不会生效，因为 :active 被 :hover 覆盖了（浏览器实际匹配的是 :hover:active，而 Tailwind 没生成这个变体）。
- 必须显式启用复合伪类变体，通过
tailwind.config.js配置variants（v2）或plugins（v3+） - v3.3+ 推荐用
plugin({})+addVariant自定义，例如添加hover:focus或hover:active - 原生不支持三重组合（如
hover:focus:active），得拆成两两组合 + JS 控制 class 切换
如何让 hover:focus 同时生效（比如表单输入框获得焦点又悬停）
这是典型需求：用户鼠标移到已聚焦的 <input> 上，既要保持焦点态样式，又要叠加悬停反馈。Tailwind 默认的 focus:xxx hover:xxx 是互斥的，必须生成 :focus:hover 选择器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- v3.3+ 在
tailwind.config.js中添加插件：plugins: [require('@tailwindcss/forms'), function({ addVariant }) { addVariant('focus-hover', '&:focus:hover'); }] - 然后可用
focus-hover:bg-indigo-100，它会生成.focus-hover\:bg-indigo-100:focus:hover { ... } - 注意顺序：
focus-hover表示“先 focus 再 hover”，反过来写hover-focus就得自己定义&:hover:focus（语义等价，但习惯上按事件流写） - 不要试图用
group模拟——group-hover:group-focus:不合法，Tailwind 不解析这种嵌套
active 状态在按钮点击时“闪一下就消失”的真实原因
不是 Tailwind 的 bug，而是浏览器行为：移动端点击会触发 :active，但桌面端鼠标按下时，如果鼠标移出再松开，:active 会提前结束；更关键的是，:active 默认只作用于“正在被激活的元素”，一旦焦点转移或交互结束，样式立即回退。
- 单纯加
active:bg-black很难稳定看到效果，尤其在快速点击时 - 想延长反馈，得配合
transition：比如transition-colors duration-150让颜色变化可感知 - 真正需要“按下态持续”的场景（如开关按钮），应该用 JS 控制
is-active类，而不是依赖:active伪类 - 移动端要注意
:active默认被禁用（iOS Safari），需加* { -webkit-tap-highlight-color: transparent; }并确保元素可点击（cursor: pointer或role="button"）
为什么别硬凑 hover:focus:active，而要分场景处理
三重伪类组合在真实项目中极少有不可替代的视觉需求。强行实现不仅配置复杂、生成冗余 CSS，还容易和可访问性冲突（比如键盘用户无法触发 :hover）。
- 表单控件优先用
focus-visible替代focus，避免鼠标用户看到多余焦点环 - 按钮交互建议分层：默认态 →
hover（悬停提示）→focus（键盘导航）→active（瞬时反馈），各自独立生效 - 如果设计稿真要求“悬停时点击才变色”，说明交互逻辑已超出 CSS 能力边界，该用
useState或data-state控制 class - 所有自定义变体都会增加构建体积，v3 的
content扫描机制也无法自动提取hover:focus:active:bg-x这类字符串，必须手动声明
最常被忽略的一点：伪类顺序影响层叠优先级。哪怕你成功生成了 hover:focus:active，它也可能被后面写的 disabled:bg-gray-300 覆盖——因为 Tailwind 按配置顺序生成 CSS 规则，不是按 HTML class 顺序。
