active:scale-95需配合transition-transform和duration-100写在默认状态，否则无动画效果；iOS需cursor-pointer、role="button"、tabindex="0"、touch-manipulation等才能触发:active。
因为active:scale-95本身不带动画，你漏写了transition-transform和duration-类——它们必须写在按钮的默认状态里，而不是:active里。
为什么active:scale-95看起来像没反应
它其实有反应，只是“啪”一下缩、松手立刻弹回，人眼根本抓不住。原因不是 Tailwind 不支持，而是 CSS 的 :active 伪类只控制“按下时的样式值”，不负责“怎么变过去”。过渡动画必须由常态元素自己声明。
-
transition-transform告诉浏览器：“我只对 transform 变化做过渡” -
duration-100设为 100ms 是经验阈值：短于 80ms 感觉不到，长于 150ms 显得卡顿 - 别用
transition-all—— 如果按钮同时有hover:bg-blue-600，颜色变化也会被拖慢，点击反馈变钝
移动端点不动:active的常见原因
iOS Safari 默认对非表单控件或无交互意图的容器禁用 :active，哪怕你用了 div + role="button"，也得手动激活。
- 确保按钮或其父容器有
cursor: pointer（Tailwind 中可加cursor-pointer） - 如果是
div模拟按钮，必须加role="button" tabindex="0"，否则 iOS 根本不触发:active - 加
touch-action: manipulation（Tailwind 中为touch-manipulation），告诉浏览器“这是单点操作，别等 300ms 判断双击” - 部分老版本 iOS 还需要全局设
-webkit-tap-highlight-color: transparent，否则先闪蓝框再缩放
scale-95 和 scale-98 怎么选
不是越小越好，也不是越大越明显。缩放值直接影响可点击性、文字清晰度和视觉节奏。
立即学习“前端免费学习笔记（深入）”；
-
scale-95（0.95 倍）是平衡点：GPU 渲染稳定、不触发重排、热区收缩可控、焦点框位置不变 -
scale-98变化太弱，尤其在小按钮或高 DPI 屏幕上，用户基本感知不到点击响应 -
scale-90或更低会让文字边缘模糊，iOS 上还可能被误判为长按，触发系统菜单 - 如果按钮内含图标+文字，优先测试
scale-95下图标是否仍清晰、文字是否未被裁切
多个状态共存时的冲突点
hover:scale-105 和 active:scale-95 能共存，但容易出现“松手先回 hover 状态、再弹回原始大小”的跳变。
- 解决方法一：把
hover的 duration 设长一点（如duration-200），active保持duration-100，错开节奏 - 解决方法二：让
hover只动颜色（hover:bg-blue-600），active专攻scale，避开 transform 冲突 - 更关键的是：所有 transition 必须写在基础类中，例如
transition-transform duration-100 ease-in，不能只写在:active后面
真正难的不是写出 active:scale-95，而是让这个缩放在真机上每次点都准时触发、不抖、不粘滞、不被系统高亮盖掉——这些细节藏在 cursor、role、touch-action 和父容器的 pointer-events 里，而不是 class 列表里。
