Tailwind 的 scale 类默认无动画，需配合 transition-transform、duration- 等类实现平滑缩放；注意 overflow-hidden 裁剪、scale-0 导致交互失效、移动端 hover 不可靠等问题。
scale 类默认不带动画，必须手动加 transition
直接写 scale-125 元素会瞬间放大，没有过渡效果——因为 Tailwind 的 scale- 工具类只设置 transform: scale()，不控制动画时长或缓动。想让它“平滑缩放”，得额外加 transition 相关类。
-
transition：启用所有可动画属性的默认过渡（含 transform） -
transition-transform：更精准，只对transform生效，避免意外影响 color、opacity 等其他属性 -
duration-300、ease-in-out等可叠加控制节奏和时长
常见错误是只写 hover:scale-110，鼠标移入立刻跳变；正确写法示例：transition-transform duration-200 ease-in
hover 缩放失效？检查父容器是否 overflow-hidden
当元素放大后超出父容器边界，而父容器设置了 overflow-hidden，缩放部分会被裁剪，看起来像“没放大”或只有一半生效。
- 这是布局限制，不是 Tailwind bug
- 临时调试可加
border border-red-400查看父容器实际范围 - 解决方案包括：移除父级
overflow-hidden、改用overflow-visible、或给父容器留出缩放余量（如 padding）
尤其在卡片、按钮组、网格项中高频出现，别急着换 JS 动画，先查 DOM 结构。
scale 值为 0 会导致子元素不可见且无法交互
scale-0 实际是 transform: scale(0)，元素视觉消失，同时触发 pointer-events: none 效果（浏览器行为），点击穿透、focus 失效、子元素无法触发任何事件。
- 若需“隐藏但保留占位”，用
opacity-0+invisible更稳妥 - 若需“彻底卸载”，应配合
hidden或条件渲染，而非仅靠scale-0 - 动画中慎用
scale-0→scale-100，因 scale(0) 会丢失子元素尺寸计算，可能导致重排抖动
这个点在做下拉菜单、模态框入场动画时最容易踩坑——看着动了，点不了，还以为是 z-index 问题。
移动端 touch 设备上 hover 缩放基本不可靠
iOS Safari 和多数安卓浏览器对 :hover 支持弱，尤其在无 hover 模拟的真机上，hover:scale-105 可能完全不触发，或只在首次点击后延迟响应。
- 不要把交互核心逻辑绑定在
hover: - 替代方案：用
active:scale-95响应触摸按下态（兼容性好得多） - 或结合 JS 监听
touchstart/touchend切换 class，避开伪类限制
真机测试比 DevTools 的 device toggle 更可信；一个 hover 动画在桌面看着完美，在 iPhone 上可能压根不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
