按钮悬停颜色突变需加transition类实现平滑过渡，如transition-colors duration-300；group可让子元素响应父级hover，如group-hover:translate-x-1；duration和ease需与transition类共用才生效。
按钮悬停时颜色突变，怎么加平滑过渡
直接写 hover:bg-blue-500 会瞬间切换颜色，人眼明显感知“卡顿”。必须配合过渡类才能平滑——但不是所有框架都默认开启，比如 Tailwind CSS 默认只对 background-color、color、opacity 等少数属性启用过渡，且需显式声明。
- 必须添加
transition或更具体的transition-colors、transition-background-color - Tailwind v3+ 中，
transition默认等价于transition-colors duration-150 ease-in-out，但仅限支持的属性；若改了transform（如缩放），就得用transition-transform - 旧项目用了自定义
theme.extend.transitionProperty，可能覆盖默认行为，导致 hover 失效
<button class="bg-gray-200 text-gray-800 py-2 px-4 rounded transition-colors duration-300 hover:bg-blue-500 hover:text-white"> 点击我 </button>
用 group + group-hover 实现子元素联动变化
原生 :hover 只能影响自身或后续兄弟元素，而框架如 Tailwind 的 group 提供父级 hover 上下文，让子元素响应父级悬停状态。常见于带图标的按钮、下划线文字、箭头方向翻转等场景。
-
group必须加在容器上（如<div class="group">或直接按钮本身） - 子元素用
group-hover:xxx触发样式，例如group-hover:translate-x-1让图标右移 - 注意：
group不支持嵌套多层，二级group会覆盖一级，不推荐深套
<button class="group bg-white border border-gray-300 px-4 py-2 rounded-lg"> 查看详情 <span class="ml-1 inline-block transition-transform group-hover:translate-x-1">→</span> </button>
自定义过渡时间与缓动函数失效的常见原因
写了 duration-500 却还是快闪，大概率是过渡属性没对上。Tailwind 的 duration- 类只作用于当前已启用过渡的属性，不是全局生效。
-
duration-500必须和transition-类同时存在，单独写无效 - 缓动函数如
ease-in-out要搭配transition使用，transition-colors ease-in-out才正确；transition-colors自身不含缓动，需额外加 - CSS 优先级冲突：如果组件库（如 Bootstrap）或全局样式里写了
transition: none !important，会强行禁用所有过渡
原生 CSS 写法与框架类名混用的风险
在框架项目中手写 :hover { background: #3b82f6; transition: background 0.3s ease; } 很容易被忽略的点是：它会覆盖框架生成的内联过渡逻辑，尤其当框架用 JS 动态增删 class 时，原生 hover 规则可能被跳过或延迟触发。
立即学习“前端免费学习笔记（深入）”；
- 优先用框架提供的过渡类，保持行为一致
- 若必须手写，确保选择器权重足够，且避免使用
!important—— 它会让后续调试变得不可预测 - 检查 DevTools 的 “Computed” 面板，确认
transition最终是否生效，以及作用在哪个属性上
最常被忽略的是：过渡属性必须和 hover 修改的属性完全匹配。改了 background-color，却只写了 transition: opacity .2s，那就什么都不会平滑。
