应直接在可点击元素上添加 -webkit-tap-highlight-color: transparent，tailwind 不内置该属性，需通过 @layer utilities 自定义 .no-tap-highlight 类并手动应用，且必须真机测试，因模拟器不触发、动态元素需显式添加、部分 webview 对全局设置敏感。
直接加 -webkit-tap-highlight-color: transparent 到可点击元素上，Tailwind 默认不提供该属性，必须手动用 @layer utilities 或内联 style 注入，且不能靠 class="hover:..." 类或父容器样式继承。
为什么 Tailwind 的 active: 或 focus: 类完全没用
:active 伪类只在手指按住未松开的毫秒级窗口内生效，且依赖事件路径（比如滑动离开再松手就压根不触发）；而 iOS 的蓝色高亮是 WebKit 内核在 touchstart 后立即绘制的独立图层，生命周期、渲染层级、触发时机全部和 CSS 状态无关。你写了 active:bg-transparent 却仍有蓝框，说明问题根本不在这里。
如何在 Tailwind 项目中正确注入 -webkit-tap-highlight-color
Tailwind 不内置该属性，需主动扩展。推荐在 tailwind.config.js 的 @layer utilities 中添加：
module.exports = {
theme: {
extend: {}
},
plugins: [],
content: [],
// 必须显式启用
corePlugins: {
preflight: true
}
}
<p>// 在你的 CSS 文件中（如 styles.css）
@layer utilities {
.no-tap-highlight {
-webkit-tap-highlight-color: transparent;
}
}</p>
然后在 HTML 中使用：<button class="no-tap-highlight ..."></button>。注意：
- 不要写
* { -webkit-tap-highlight-color: transparent }—— 某些微信 X5 WebView 会因此白屏 - 不要只加在父容器上，
div包裹的按钮必须让button自己带这个 class - Vue/React 动态插入的按钮（如
v-if或useState触发）不会自动继承，得确保新节点也带no-tap-highlight
真机测试时最常漏掉的三个条件
桌面 Chrome 的设备模拟器默认不触发 tap 高亮，开发阶段完全看不到问题。必须在真实设备上验证：
- iOS Safari：确认
<meta name="viewport">存在且不含user-scalable=no，否则部分机型强制恢复高亮且无法关闭 - Android Chrome：62+ 已弃用该属性，但微信 X5、QQ 浏览器仍依赖它，得单独测
- 动态元素：比如点击「展开」后渲染出的新按钮，若没加
no-tap-highlight，高亮立刻回归
真正麻烦的不是怎么写这行 CSS，而是它只在真实触摸下存在、只对特定内核生效、还和可访问性提示共存——关得太彻底，键盘用户就找不到焦点在哪了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
