hover:scale-110需配合transition-transform、duration-300和ease-out才能实现平滑缩放动画，否则会瞬间跳变；应避免使用width/height过渡，优先用gpu加速的transform；移动端需改用active或focus-within。
hover:scale-110没动画，缺transition-transform
直接写 hover:scale-110 会瞬间跳变，不是 Tailwind 失效，而是你只定义了“终点”，没告诉浏览器“怎么变过去”。transform 属性本身不触发过渡，必须显式加 transition-transform（或 transition-all）来启用插值。
常见错误现象：
-
div hover:scale-110单独存在 → 没有基础transform值，也无过渡声明，纯跳变 -
div transition-all hover:scale-110看似合理，但transition-all会连box-shadow、filter一起动，可能卡顿或意外抖动
正确做法是只过渡 transform：
- 确保元素是块级或 inline-block（
inline元素默认不支持transform） - 在常态类中同时写
transition-transform+duration-300+ease-out -
hover:scale-110必须和一个无缩放的基础态共存（比如不写任何scale，就默认是scale(1)）
示例：<div class="inline-block transition-transform duration-300 ease-out hover:scale-110">按钮</div>
为什么用 scale 而不用 width/height？
因为 width 和 height 变更会触发浏览器重排（reflow），性能差，且 Tailwind v3.0+ 已默认禁用 transition-width 和 transition-height。而 transform: scale() 是 GPU 加速的合成层操作，无重排，帧率稳。
使用场景：
- 按钮、卡片、图标等需要轻微反馈的交互元素
- 配合
group实现父容器 hover 时子元素缩放（如导航项悬停放大） - 避免在移动端依赖 hover：iOS Safari 对 hover 支持极弱，建议搭配
active:scale-95做按下反馈
注意：scale 是相对自身尺寸缩放，不会影响布局流；而 width-16 hover:w-24 会推挤邻近元素，且无法平滑过渡（除非用 max-w- + transition-max-w，但也不推荐）
duration-300 必须写在常态类里，不能只挂 hover:
hover:duration-300 是无效的——它不会让进入动画变慢，反而会让离开时直接跳回，因为过渡时长必须在初始状态就声明，浏览器才能对“离开”也应用缓动。
错误写法：hover:scale-110 hover:duration-300 → 进入有动画，离开无动画，突兀
正确结构必须是：
-
transition-transform（指定过渡属性） -
duration-300（指定时长，必须与 transition 类共存） -
ease-out或ease-in-out（指定缓动，增强自然感） - 全部放在非 hover 的基础类中
示例：class="transition-transform duration-300 ease-in-out hover:scale-110"
移动端悬停失效？换 active 或 focus-within
iOS 和多数安卓 WebView 几乎不支持 :hover，首次点击可能模拟一次，之后就失效，甚至卡在悬停态。纯靠 hover:scale-110 在手机上基本等于没写。
替代方案：
- 按钮类元素优先用
active:scale-95模拟按下反馈（真机可触达） - 需要 hover+click 双模式的容器，用
group包裹，内部子元素用group-hover:scale-110，再给容器加focus-within或手动设tabindex="0" - 表单控件（如
select、input）别依赖 hover，改用focus:scale-105更可靠
容易被忽略的一点：很多“悬停放大没反应”的问题，根源不在 CSS，而在元素本身不可交互——检查 pointer-events 是否为 none，或父级是否遮挡了鼠标事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
