Tailwind 默认不生成 mask-image 工具类，必须通过 theme.extend 注册 base64 编码的 SVG 遮罩并同时声明 -webkit-mask-image 和 mask-image 才能兼容 Safari；mask-[url(...)] 因未被编译进 CSS 且 Safari 拒绝动态值而失效，hover/active 等变体无法生效。
Tailwind 默认不生成 mask-image 工具类，直接写 mask-[url(...)] 在 Safari 和多数构建流程中会失效；必须通过 theme.extend 注册 base64 编码的 SVG 遮罩，并显式补全 -webkit-mask-image 才能稳定交互。
为什么 mask-[url()] 在 Tailwind 中无法响应 hover 或 active
根本原因不是语法错，而是 Tailwind 不解析动态 URL 值——mask-[url(...)] 这种写法不会被编译进最终 CSS，浏览器看到的是空规则。更关键的是，Safari 完全忽略未配对的 mask-image，只认同时存在且值一致的 -webkit-mask-image 和 mask-image。
- hover 状态加在
mask-[url(...)]上毫无效果，因为该类根本没生成 - 即使你手动写了内联
style="mask-image: url(...)”，Safari 仍要求同步声明-webkit-mask-image - 用
background-image注册 base64 SVG 后，再通过bg-icon-home+mask-image-[url(...)]组合，才能让变体（如hover:mask-image-[url(...)]）生效
如何注册可交互的 mask-image 工具类
必须把 SVG 转成 base64，删掉 XML 声明和换行，确保所有 fill 是 currentColor，然后注入 theme.extend.maskImage（Tailwind 5.3+）或 theme.extend.backgroundImage（兼容旧版）。
- base64 字符串必须用单引号包裹在双引号内：
"url('data:image/svg+xml;base64,PHN2Zy...')" - 注册后使用
mask-image-logo这类静态类名，才能叠加hover:mask-image-radial - 若需深色模式适配，不要在 SVG 里写死颜色，而是在父级设
text-white或text-slate-900，靠currentColor自动继承 - 避免用相对路径（如
./logo.svg），构建后路径失效；绝对路径也受限于 public 目录结构
移动端 hover/active 交互的三个硬限制
iOS Safari 对 mask 交互极其保守：遮罩图缩放失真、悬停区域偏移、按下态一闪即逝。这不是 Tailwind 的问题，而是底层渲染机制决定的。
立即学习“前端免费学习笔记（深入）”；
-
hover:在触摸设备上默认不触发，除非元素有tabindex="0"或是原生可交互标签（<button>） -
active:在 Safari 中仅维持几十毫秒，无法用于“按住高亮”，建议改用focus-within:或 JS 控制 class - mask-size 必须用
mask-size-cover或mask-size-100%，写死像素值（如mask-size-24）会导致高 DPI 屏幕模糊 - 动画不能直接 transition
mask-image，但可 transitionmask-position或底层background-position模拟扫光效果
真正麻烦的不是怎么写 class，而是 base64 编码是否干净、-webkit- 前缀是否漏写、以及 Safari 是否把你的 mask 当作“可交互内容”——它只认完全合规的内联 SVG，任何空格、换行、未编码的 # 都会让整个遮罩失效。
