hover:scale-105没反应主因是元素为inline类型或transform被覆盖；需加inline-block、overflow-visible、transition-transform duration-300 ease-in-out及transform-origin-center。
hover:scale-105 为什么没反应？检查 transform-origin 和 display 类型
直接加 hover:scale-105 没效果，大概率是因为元素默认不支持 transform —— 比如 <span>、<div>（未设宽高）或 display: inline 元素。Tailwind 的 scale- 系列依赖 CSS transform，而该属性对 inline 元素无效。
实操建议：
- 给目标元素显式添加
inline-block或block（推荐inline-block避免布局塌陷） - 若缩放中心偏移（比如从左上角拉伸），补上
origin-center（默认是origin-center，但父容器有transform时可能被覆盖） - 确保没有其他 CSS 覆盖了
transform，例如第三方库重置了transform: none
如何让缩放带过渡动画？必须手动加 transition
Tailwind 不会自动为 hover: 变体注入 transition，hover:scale-105 单独写只是“瞬间切换”，不是“平滑缩放”。要实现你想要的“平滑”，得配 transition-transform（或更通用的 transition）。
常见组合写法：
立即学习“前端免费学习笔记（深入）”；
-
transition-transform duration-300 ease-in-out hover:scale-105—— 推荐：只过渡 transform，性能好 -
transition duration-300 hover:scale-105—— 简单但略重，会过渡所有可动画属性 - 避免用
ease-linear做悬停缩放，生硬；ease-in-out或ease-out更自然
scale-105 在不同设备下表现不一致？注意视口缩放和像素比
在高 DPI 屏幕（如 MacBook Retina、部分安卓机）或浏览器缩放非 100% 时，scale-105 可能出现边缘模糊、文字锯齿，尤其对 PNG 图标或细边框元素明显。这不是 Tailwind 的 bug，而是 CSS transform 在亚像素渲染下的固有限制。
缓解方式：
- 对图标类元素，加
will-change-transform（Tailwind v3.3+ 支持，或手写will-change: transform）提升渲染优先级 - 避免对含文字的容器整体缩放；优先对
<img>或伪元素缩放 - 测试时务必在真实设备上验证，Chrome DevTools 的“Device Toolbar”模拟不如真机准确
想缩放同时移动位置或改透明度？别堆 hover 变体，用 group-hover
如果需求是“悬停父容器时，子元素缩放 + 上移 + 变半透”，硬写 hover:scale-105 hover:-translate-y-1 hover:opacity-80 容易冲突（多个 hover 触发时机/优先级难控），且无法保证原子性。
更可靠的做法：
- 给父容器加
group - 子元素用
group-hover:scale-105 group-hover:-translate-y-1 group-hover:opacity-80 - 这样所有状态由同一 hover 事件驱动，无竞态，也方便后续加
transition-all
复杂交互动效里，group-hover 比链式 hover: 更可控，也更容易配合 delay- 或 duration- 微调节奏。
真正卡住的点往往不在 scale 数值本身，而在 transform 是否生效、transition 是否绑定、以及高 DPI 下的渲染妥协——这些细节不报错，但会让效果看起来“像没动”。
