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"，也得手动激活。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 确保按钮或其父容器有 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 列表里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！