tailwind 默认不支持 mask-image 或 clip-path 的任意值写法，mask-[url()] 和 clip-path-[polygon()] 构建后为空规则；必须通过 theme.extend 显式注册 base64 svg 遮罩或 polygon 坐标，且 safari 要求同时声明 -webkit-mask-image 和 mask-image 才能显示。
直接说结论：Tailwind 默认不支持 mask-image 或 clip-path 的任意值写法，mask-[url()] 和 clip-path-[polygon()] 在构建后是空规则，Safari 下尤其会静默失效；必须通过 theme.extend 显式注册 base64 编码的 SVG 遮罩或 polygon 坐标，且 Safari 要求同时声明 -webkit-mask-image 和 mask-image 才能显示。
为什么 mask-[url('./logo.svg')] 在 Safari 里完全不显示
这不是路径错或构建漏了，而是 Safari 对 mask-image 的解析极其保守：
-
mask-[url()]这类动态语法根本不会被 Tailwind 编译进 CSS，浏览器收到的是未定义的空类 - Safari 拒绝只写
mask-image: url()，必须同时存在值完全一致的-webkit-mask-image和mask-image - 相对路径（如
./logo.svg）和未编码的 data URL（含#、空格、换行）都会被跳过解析 - 唯一稳定方案：把 SVG 转成单行 base64，删掉 XML 声明和所有换行，fill 全设为
currentColor，再注入theme.extend.backgroundImage
如何用 theme.extend 注册可 hover 的 mask 工具类
注册不是为了“让 class 生效”，而是为了让 Tailwind 认出这个值并生成对应 CSS 规则，从而支持变体（如 hover:mask-image-logo）：
- 在
tailwind.config.js中扩展backgroundImage，例如：'icon-home': "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci...')" - 使用时必须同时写三个类：
bg-icon-home mask-image-[url('data:image/svg+xml;base64,...')] -webkit-mask-image-[url('data:image/svg+xml;base64,...')]，base64 字符串必须一字不差 - SVG 内不能有硬编码颜色，所有
fill必须是currentColor，靠父级text-white或text-slate-900控制显色 - hover 变体只对注册后的静态类名有效，
hover:mask-image-[url()]永远无效
为什么 clip-path-[polygon(50%_0,_100%_50%,_50%_100%,_0_50%)] 没反应
不是坐标写错了，而是 Tailwind 默认不解析 clip-path 的函数值：
-
clip-path-[polygon()]不属于任意值语法支持范围，不会生成任何 CSS - 必须通过
theme.extend.clipPath显式注册，例如：'diamond': 'polygon(50% 0, 100% 50%, 50% 100%, 0 50%)' - 注册后使用
clip-path-diamond，才能叠加md:clip-path-circle这类响应式变体 - 坐标中不能插 CSS 变量（如
var(--x)），会被浏览器静默丢弃；百分比值会随容器尺寸变化，但若父元素有transform，参考系可能偏移，需加transform-box: fill-box
移动端 mask 交互的三个硬限制
iOS Safari 对 mask 渲染机制有底层约束，不是加个 hover: 就能用：
- 触摸设备上
hover默认不触发，除非元素是<button></button>或带tabindex="0" -
active态在 Safari 中仅维持几十毫秒，无法实现“按住高亮”，建议改用focus-within:或 JS 控制 class -
mask-size必须用mask-size-cover或mask-size-100%，写死像素值（如mask-size-24）会导致高 DPI 屏幕模糊 - 不能直接
transition mask-image，但可transition mask-position实现平滑位移效果
最容易被忽略的一点：所有 base64 字符串必须严格单行、无空格、无换行，且 -webkit-mask-image 和 mask-image 的值必须完全一致——差一个字符，Safari 就当没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
