hover 变体必须配合默认状态类使用，单独写如 hover:bg-blue-500 无效；需确保基础样式（如 bg-gray-200）已定义，且颜色体系一致、已注册或正确使用任意值语法。
hover 变体必须配合类名一起写，不能单独用
很多人以为 hover:bg-blue-500 是个独立样式，直接加在元素上就能生效——其实它只是 Tailwind 提供的一个“变体前缀”，本质是生成带 :hover 伪类的 CSS 规则。如果基础背景色没定义（比如没写 bg-gray-100），那悬停时就找不到“从什么颜色变到什么颜色”，视觉上毫无反应。
常见错误现象：hover:bg-red-400 单独使用，鼠标移上去完全没变化；检查元素发现生成的 CSS 是 .hover\:bg-red-400:hover { background-color: #f87171; }，但元素本身没 background-color，自然不变。
- 必须搭配一个默认状态类，比如
bg-gray-200 hover:bg-red-400 - 颜色类之间要语义一致，别混用不同体系，比如
bg-slate-300 hover:bg-emerald-500没问题，但bg-opacity-20 hover:bg-blue-500会因透明度丢失导致变色突兀 - 若用
text-或border-类，同样需要先定义默认值，否则悬停无效
自定义颜色或不支持的颜色值无法直接 hover
Tailwind 默认只生成配置中明确列出的颜色变体。如果你在 tailwind.config.js 里没扩展 colors，却写了 hover:bg-[#3b82f6]，它不会报错，但也不会生效——因为 hover: 变体只作用于已注册的类名，不解析任意 CSS 值。
使用场景：想让按钮悬停时变成某个品牌蓝（#2563eb），但该色不在默认 palette 里。
立即学习“前端免费学习笔记（深入）”；
- 方案一：在
tailwind.config.js的theme.extend.colors中添加，例如brandBlue: '#2563eb'，然后用hover:bg-brandBlue - 方案二：改用任意值语法
hover:bg-[#2563eb]，但注意这会绕过 JIT 编译优化，且需确保启用了content扫描（否则可能漏生成） - 性能影响：大量使用
[...]任意值会拖慢构建，尤其开发时热更新变慢
hover 在触摸设备上可能意外触发
移动端没有“悬停”概念，但很多浏览器（尤其是 iOS Safari）为兼容旧网站，会在第一次点击后模拟一次 :hover。结果就是：用户点一下按钮，它突然变色，再点一次才执行点击逻辑，体验割裂。
常见错误现象：手机上点按钮，颜色卡在悬停态，要再点一次才恢复；或者表单输入框获得焦点后，hover:border 突然生效，干扰视觉反馈。
- 稳妥做法：对纯交互类（如按钮、链接）保留
hover:，但对表单控件优先用focus:或focus-visible: - 更彻底的解法：用
@media (hover: hover)包裹 hover 样式，Tailwind 8+ 已内置hover-focus:等响应式变体，但需确认项目版本 - 别依赖
hover:做关键状态提示，比如“禁用态悬停变灰”，应改用disabled:opacity-50+disabled:cursor-not-allowed
嵌套元素 hover 时父级类不自动继承
写 <div class="hover:bg-yellow-100"><span class="hover:text-red-600">文字</span></div>，你以为鼠标移到文字上，父 div 会变黄——但不会。Tailwind 的 hover: 只作用于当前元素自身的伪类，不穿透、不冒泡、不影响祖先。
使用场景：菜单项需要整个区域悬停高亮，但内部有图标和文字两个子元素，只给子元素加 hover: 不够。
- 正确做法：把
hover:bg-yellow-100加在最外层容器上，子元素用默认样式即可 - 如果子元素也要独立悬停效果（比如图标放大），可以叠加：
<div class="hover:bg-yellow-100"><span class="hover:scale-110">✨</span></div> - 避免写
<div class="hover:bg-yellow-100"><span class="hover:bg-yellow-100">文字</span></div>——冗余且父级 hover 已覆盖整个区域，子级 hover 完全没必要
