active:scale-95无动画效果是因为未在默认状态声明transition-transform和duration类；正确写法需在基础类中加入transition-transform duration-100，避免用transition-all导致反馈迟钝。
为什么active:scale-95没动画效果
因为transition没写在默认状态里。Tailwind 的 active: 变体只负责切换样式，不自动加过渡；必须显式声明 transition-transform 和 duration- 类，且要放在按钮基础类中。
-
active:scale-95单独写会“啪”一下缩，松手立刻弹回，没有缓动 - 正确写法是：同时带
transition-transform duration-100（推荐 100ms，太长像卡顿） - 别用
transition-all搭配active:scale-95—— 如果按钮还有 hover 背景色变化，颜色过渡也会被拖慢，反馈变钝
active:scale-95 和 hover:scale-105 能共存吗
能，但要注意时序和性能取舍。悬停放大和点击缩小是两个独立状态，浏览器能区分，但叠加后容易让视觉节奏混乱。
- 常见问题：鼠标悬停时放大，点下去又缩，松手先恢复到 hover 状态再回原始大小，中间多一次跳变
- 解决方法：把 hover 和 active 的 duration 设成不同值，比如
duration-200（悬停慢一点）+duration-100（点击快一点） - 更稳妥的做法：用
transition-transform duration-100 ease-in配合active:scale-95，而 hover 只动颜色：hover:bg-blue-600，避开 transform 冲突
移动端点不动active怎么办
iOS Safari 默认不触发 :active，尤其在无 cursor: pointer 或未聚焦的容器里。Tailwind 没内置修复类，得手动补。
- 最轻量方案：给按钮加
class="cursor-pointer"，部分 iOS 版本会因此激活:active - 更可靠方案：在父容器（比如
div或body）上加class="touch-pan-y"或直接写style="cursor: pointer" - 如果用的是
div模拟按钮，必须加role="button" tabindex="0"，否则屏幕阅读器和部分移动端根本不识别为可点击元素
缩放值选 scale-95 还是 scale-98
优先用 scale-95，但不是因为“更明显”，而是因为它在多数尺寸下仍保持可读、可点、不触发重排。
-
scale-98（0.98 倍）变化太弱，用户可能感知不到点击响应，尤其小按钮或高 DPI 屏幕 -
scale-90或更低会让文字边缘模糊、热区收缩，iOS 上还可能误判为“长按”触发菜单 -
scale-95是平衡点：肉眼可辨、GPU 渲染稳定、不影响焦点框位置、不挤压相邻元素（transform 不占布局空间）
缩放反馈真正难的不是写对类名，而是让active在各种设备上都准时触发、缩放不抖、松手不粘滞——这些细节藏在 cursor、role、timing function 和父容器 pointer-events 里，而不是 class 列表里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
