active:scale-95在移动端真机失效，根本原因是iOS Safari等浏览器默认不触发:active伪类，必须同时满足cursor-pointer、touch-action-manipulation及无pointer-events-none/overflow-hidden干扰，并配齐transition-transform、transform属性和origin-center才生效。

直接用 active:scale- 类做点击缩放反馈，但真机上大概率失效——不是你写错了，是 Safari 和安卓 WebView 默认不触发 :active 伪类。

为什么 active:scale-95 在手机上点不动

根本问题不在 Tailwind，而在移动端浏览器渲染机制：iOS Safari 压根不激活 :active，除非你明确告诉它“这个元素可交互”。常见漏掉的三件事：

• 没加 cursor-pointer —— Safari 需要这个才启用 :active
• 没设 touch-action-manipulation —— 否则 touchstart 被浏览器拦截，:active 根本进不来
• 父容器有 overflow-hidden 或 pointer-events-none —— 事件冒泡被截断，子元素收不到状态

active:scale- 要生效必须配齐这三样

缺一不可，否则就是“啪一下缩、啪一下弹回”，毫无动画感：

• 基础类里必须声明 transition-transform 和 duration-150（推荐 100–150ms，200ms 以上就拖沓）
• 元素本身得有 transform —— Tailwind 的 scale 类依赖该属性，没它就无效
• 缩放中心建议用 origin-center（默认）或 origin-[50%_75%] 微调，别全靠默认值

正确写法示例：class="bg-blue-500 transform transition-transform duration-150 active:scale-95 origin-center"

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

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

下载

立即学习“前端免费学习笔记（深入）”；

真要波纹效果，JS 不可避免

网上所谓“纯 CSS 波纹”，其实都偷偷用了 JS 注入坐标。因为 :active 和 ::after 无法绑定点击位置 —— 它们不知道用户点在哪。真要靠伪元素撑起波纹，必须：

• 按钮加 relative，否则 ::after 会相对 body 定位
• ::after 必须设 content:""、absolute、border-radius:50%、pointer-events-none、opacity:0、transform:scale(0)
• JS 动态写入 --x/--y CSS 变量，并在 CSS 中用 left:var(--x) + top:var(--y) 定位
• 移动端必须监听 touchstart 并取 e.touches[0].clientX，click 在 iOS 上有 300ms 延迟且坐标不准

真正容易被忽略的不是怎么写动画，而是 Safari 的渲染 bug（transform + top/left 组合卡顿）、连点时旧波纹没清理干净、以及 touch 和 mouse 事件没做 fallback。