hover:scale 在 Tailwind 中无效，主因是 img 默认为行内元素，transform 不生效；需加 inline-block/block、避免 overflow:hidden 裁切、确保无 transform:none 覆盖；添加 transition-transform duration-300 ease-in-out 实现平滑缩放；默认 origin-center 可改用 origin-top-left 等调整中心点；移动端需用 group-hover 或 JS 替代 hover。
hover:scale 在 Tailwind 中为什么没反应？
直接写 hover:scale-110 没效果，大概率是因为图片默认是行内元素（<img>），而 transform（包括 scale）对行内元素不生效。Tailwind 的 hover:scale-* 类底层依赖 transform: scale()，所以必须让图片支持变换。
- 给图片加
inline-block或block：比如inline-block、block、flex容器里的子项 - 避免父容器设了
overflow: hidden且未预留缩放空间——缩放后超出部分会被裁掉，看起来像“没动” - 确保没有其他 CSS 覆盖了
transform，例如手动写了transform: none或用!important干扰了 hover 状态
如何让缩放平滑且不抖动？
Tailwind 默认不带过渡动画，hover:scale-110 是瞬间跳变。要加缓动，必须显式加上 transition 相关类。
- 最简方案：
transition-transform duration-300 ease-in-out - 如果同时希望透明度或位置也有过渡，可用
transition-all，但更推荐只过渡transform，性能更好 - 注意：
duration-后的数字单位是毫秒，duration-300= 0.3 秒；过短（如duration-75）易感知卡顿，过长（duration-500）会拖沓 - 慎用
ease-in—— 开头太慢，悬停响应迟滞；ease-in-out更自然
缩放中心点偏移怎么办？
默认缩放以元素中心为原点，但如果图片在容器里靠左/靠上，悬停时会“漂移”，视觉上像被推开。这不是 bug，是 transform-origin 的默认行为（50% 50%）。
- 想以左上角为缩放中心：加
origin-top-left - 想以顶部居中：用
origin-top - 想以鼠标指针位置为中心？Tailwind 不支持动态 origin，得回退到手写 CSS +
transform-origin: event.clientX px event.clientY px - 常见组合：
inline-block origin-center transition-transform duration-300 ease-in-out hover:scale-110
移动端 hover 无效的替代思路
iOS Safari 和多数安卓浏览器不触发 :hover 伪类（除非模拟桌面模式）。纯 hover:scale-* 在真机上基本失效。
立即学习“前端免费学习笔记（深入）”；
- 方案一：改用
group+group-hover，把 hover 绑定到父容器（比如带cursor-pointer的<div>），并配合touch-action: manipulation提升点击响应 - 方案二：JavaScript 监听
touchstart/touchend切换 class，例如临时加scale-110 - 方案三：放弃缩放，改用
opacity-90或brightness-110等更稳妥的交互反馈
真正上线前务必在真机上验证——光看 Chrome DevTools 的 “Toggle device toolbar” 不够准，它只是模拟 viewport，不模拟触摸事件生命周期。
