移动端点击高亮是iOS Safari和部分安卓浏览器默认添加的半透明灰色overlay，由-webkit-tap-highlight-color控制，需禁用以保障自定义交互样式一致性；Tailwind v3.0+需在corePlugins中启用tapHighlightColor开关并重启服务方可使用tap-highlight-transparent工具类。
移动端点击高亮是什么，为什么需要禁用
iOS Safari 和部分安卓浏览器（如旧版 Chrome）在触摸点击时会默认加一层半透明灰色 overlay，这是 -webkit-tap-highlight-color 的表现。它和 :active 伪类无关，也不受 pointer-events 控制，纯属系统级反馈。用户没做任何交互设置时就会出现，影响按钮、卡片等自定义样式的视觉一致性。
禁用它不是为了“去掉所有反馈”，而是把控制权交还给开发者：你想用 scale、opacity 或背景色变化来响应点击，就得先关掉这个默认高亮。
tailwind.config.js 中启用 tap-highlight-transparent
Tailwind v3.0+ 默认不包含该工具类，必须手动开启。它不在默认的 corePlugins 列表里，也不是通过 plugins: [] 加载的——它是 corePlugins 的一个开关项。
在 tailwind.config.js 的 corePlugins 配置中显式设为 true：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
corePlugins: {
tapHighlightColor: true, // 注意：键名是 tapHighlightColor，不是 tap-highlight-transparent
},
}改完后重启 dev server（热更新不识别 config 变更）。之后就能在 class 中使用 tap-highlight-transparent 了。
常见错误：
- 写成
tapHighlightTransparent或tap-highlight-color—— 实际键名是tapHighlightColor - 只加了
plugins: [require('@tailwindcss/forms')]却没配corePlugins—— 该功能与插件无关 - 用了
tailwindcss@2.x—— 此功能仅 v3.0+ 支持
tap-highlight-transparent 的实际应用和限制
这个 class 本质只是给元素加一行 CSS：-webkit-tap-highlight-color: transparent。它只对支持该属性的浏览器生效（主要是 WebKit 内核），对 Firefox、桌面端完全无效，也不影响 :active 样式。
典型用法：
- 按钮、链接、可点击卡片：避免点击瞬间闪灰
- 轮播图/手势区域：防止高亮干扰滑动手势识别
- 自定义 switch 或 checkbox 容器：确保点击反馈由你完全控制
注意点：
- 不能写在伪类里（如
hover:tap-highlight-transparent）—— 该属性不支持动态切换 - 对
<input type="button">等原生控件效果有限，建议用<button></button>替代 - 如果同时用了
touch-action: manipulation，要确认两者不冲突（一般无冲突）
替代方案：不用 Tailwind 工具类也能解决
如果你不想动 config，或者项目用的是旧版 Tailwind，可以直接写 CSS：
.no-tap-highlight {
-webkit-tap-highlight-color: transparent;
}或者全局重置（慎用）：
* {
-webkit-tap-highlight-color: transparent;
}但全局重置会影响所有元素，包括你可能想保留高亮的场景（比如某些无障碍需求），所以更推荐按需加 class 或启用 tapHighlightColor 后精准使用 tap-highlight-transparent。
最常被忽略的一点：这个样式只在真机或模拟触屏模式下可见。开发时用 Chrome DevTools 的 device toolbar 模拟，但记得勾选 “Enable touch events”，否则看不到效果。
