hover 类必须与对应基础类共存，如 hover:text-red-500 需搭配 text-* 才生效；修饰符顺序严格，仅支持 hover:focus 等预设组合；响应式与 hover 需拆分为 md:bg-gray-50 md:hover:bg-gray-100；动画需显式加 transition 类。
hover 类名必须和基础类共存，不能单独写 hover:text-red-500
很多人写完 text-gray-700 hover:text-red-500 发现悬停没反应，其实是漏了基础状态类——Tailwind 的 hover: 是修饰符，不是独立规则，它只作用于“当前已存在的同类基础类”。比如 hover:text-red-500 只有在同时存在 text-gray-700（或任意 text-*）时才生效。
实操建议：
- 检查元素是否已有对应的基础文本/背景/边框类，例如想改颜色，必须先有
text-blue-600才能加hover:text-blue-800 - 不要试图用
hover:覆盖非同类属性，比如hover:bg-red-500对没有bg-*的元素无效 - 多个 hover 状态可叠加：
bg-white hover:bg-gray-50 hover:shadow-sm是合法且常用写法
组合修饰符顺序影响渲染优先级，hover:focus 和 focus:hover 效果不同
Tailwind 按修饰符出现顺序生成 CSS 选择器，hover:focus 编译为 &:hover:focus（鼠标悬停且获得焦点），而 focus:hover 会报错或被忽略——因为 Tailwind 不支持反向修饰链，只接受预设的组合顺序。
常见错误现象：
- 写了
focus:hover:outline-none，但实际没生效：Tailwind 不识别focus:hover这种写法 - 想实现“悬停时聚焦态样式”，应改用
hover:focus:outline-none，前提是元素本身支持 focus（如<button></button>或带tabindex的元素） - 可用组合有限，官方支持的嵌套修饰符只有：
hover:focus、group-hover:、peer-checked:等，不支持自定义链式嵌套
响应式 + hover 写法容易失效，md:hover:bg-gray-100 不起作用
Tailwind 的响应式前缀（如 md:）和交互修饰符（如 hover:）不能直接连写。md:hover:bg-gray-100 是非法语法，会被忽略——因为 hover: 必须紧贴属性名，中间不能插入其他前缀。
正确做法是把响应式和交互拆成两个独立类：
- 写成
md:bg-gray-50 md:hover:bg-gray-100，这样在中屏及以上才启用 hover 效果 - 注意：移动端无 hover，所以
md:+hover:实际只对桌面设备生效，这点常被忽略 - 如果需要“触屏设备模拟 hover”，得靠 JS 切换类，Tailwind 本身不提供
touch-hover这类抽象
自定义 hover 动画要配 transition，否则变化生硬
单纯加 hover:opacity-80 或 hover:scale-105 会让变化瞬间完成，视觉上很突兀。Tailwind 默认不开启过渡动画，必须显式添加 transition 相关类。
性能与兼容性提示：
-
transition开启所有可动画属性，轻量但略宽泛；更推荐按需写transition-opacity或transition-transform - 避免对
width、height做 transition——触发重排，影响性能；优先用transform和opacity - 加
duration-200控制时长，ease-in-out让进出更自然；不写时长默认是duration-150 - 示例：
opacity-100 transition-opacity duration-300 hover:opacity-75
hover 的真实复杂点不在写法，而在它依赖用户输入模式（指针 vs 触摸）、CSS 层叠顺序、以及是否被更高优先级的 JS 类覆盖——这些地方一不留神就白调半天。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
