移动端点击高亮边框由浏览器默认行为触发，唯一有效解是设置 -webkit-tap-highlight-color: transparent，该属性专为触摸设备设计，不支持伪类，需显式注入并确保构建打包生效。
移动端点击按钮或可交互元素时出现的蓝色高亮边框，不是 Tailwind 的类没写对，而是浏览器默认行为未被显式禁用——-webkit-tap-highlight-color 必须设为透明，否则真机上必现。
为什么 -webkit-tap-highlight-color 是唯一有效解
这个属性专为触摸设备设计，桌面 Chrome 开发者工具模拟 touch 模式才能预览效果；它不作用于 hover 或 focus，只在手指按下瞬间触发。其他方案如 outline: none 或 box-shadow 都无法覆盖该高亮层。
-
-webkit-tap-highlight-color: transparent是最简写法，兼容所有现代 iOS/Android WebView - 若需兼容老版 iOS（如 iOS 9–12），改用
-webkit-tap-highlight-color: rgba(0,0,0,0)，避免部分内核对transparent解析异常 - 该样式必须加在实际可点击的元素上（
button、a、带role="button"的div），父容器无效
如何用 Tailwind 安全注入该样式
Tailwind 默认不提供 -webkit-tap-highlight-color 工具类，不能靠 tap-highlight-transparent 这类任意值语法生成。必须通过 @layer utilities 显式注册。
- 在
src/styles.css或主 CSS 入口文件中添加：
@layer utilities {
.no-tap-highlight {
-webkit-tap-highlight-color: transparent;
}
}
<button class="no-tap-highlight ..."></button>
class="no-tap-highlight hover:no-tap-highlight"——该属性不支持伪类变体，加了也无效容易被忽略的两个真机陷阱
即使写了 -webkit-tap-highlight-color: transparent，仍可能看到高亮，大概率是以下原因：
- 元素没有
tabindex="0"且不是原生可聚焦标签（如div）：Safari 会降级为“非交互元素”，此时高亮逻辑异常，建议改用button或加tabindex="0" - CSS 构建后未生效：Tailwind JIT 模式下，
no-tap-highlight类名若未出现在content配置扫描路径里（如没写在 JSX/TSX 中），最终 CSS 文件里就不会有这条规则——务必检查构建输出的 CSS 是否真包含该声明
真正麻烦的不是加一行样式，而是确保它被浏览器执行、被构建工具打包、被真机识别——这三个环节断一个，高亮就照常出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
