Tailwind 默认不处理 -webkit-tap-highlight-color 是因为它不属于响应式、颜色或间距类，而是 WebKit 专属底层渲染控制；需在 tailwind.config.js 的 corePlugins 中显式启用 tapHighlightColor: true 并重启构建服务。

为什么 Tailwind 默认不处理 -webkit-tap-highlight-color

Tailwind v3.0+ 从设计上就**没内置**这个属性——它不属于响应式、颜色或间距类，而是 WebKit 内核专属的底层渲染控制。你写 tap-highlight-transparent 类也不会生效，除非手动启用开关。更关键的是：这个高亮不是伪类（:active）或状态类能覆盖的，它是浏览器在 touchstart 后立刻绘制的独立图层，和 CSS 状态完全解耦。

如何在 tailwind.config.js 中启用 tap-highlight-transparent

必须显式打开核心插件开关，且需重启构建服务：

• 在 tailwind.config.js 的 corePlugins 字段里添加 tapHighlightColor: true
• 不能放在 plugins: [] 或 variants 里——它不是插件，是核心功能开关
• 改完配置后必须重新运行 npm run dev 或 pnpm build，热更新不生效
• 启用后即可使用 tap-highlight-transparent 工具类，例如：<button class="tap-highlight-transparent">点我</button>

不启用插件时的三种实操替代方案

如果你不想改配置，或项目用的是旧版 Tailwind，直接注入更可控：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 用 @layer utilities 自定义工具类：

  @layer utilities {
    .no-tap-highlight {
      -webkit-tap-highlight-color: transparent;
    }
  }

• 对动态渲染元素（如 Vue 的 v-if、React 的 useState），确保 class 随组件一起挂载，别依赖父级样式继承
• 内联 style 是最后手段：<div onclick="..." style="-webkit-tap-highlight-color: transparent">，但无法复用，且易被 React/Vue 的 style 处理逻辑覆盖

真机测试时最容易漏掉的三个条件

模拟器里永远看不到问题，等上线才发现满屏蓝灰块：

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

• 页面必须含完整 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，微信 X5 内核会因此忽略该样式
• 自定义 <div onclick> 必须同时加 role="button" 和 tabindex="0"，否则 Safari 根本不把它当可激活元素，样式写了也白写
• iOS 15.4+ 即使设了 transparent，仍可能残留微弱灰白闪烁——得额外加 user-select: none 才算真正干净，但注意别禁掉电话号码这类可复制内容

Tailwind 不帮你管这个，是因为它管不了：浏览器内核行为、真机触发时机、语义化要求、WebView 差异……这些全在框架之外。写完配置或工具类，务必拿 iOS 真机点一遍，别信模拟器。