tailwind默认不支持图片遮罩，因其未内置mask-image等遮罩属性工具类；需通过theme.extend手动扩展maskimage、masksize等，并注意safari兼容性、路径有效性及mask-mode浏览器支持差异。
为什么 tailwind 默认不支持图片遮罩
因为 mask-image、mask-mode 等遮罩相关属性不属于 Tailwind 内置的 utility class 范围，它默认只覆盖常用布局、颜色、间距等基础样式。即使你写了 mask-image: url(...)，Tailwind 也不会自动生成对应 class，直接写在 HTML 里也不生效（除非用 style 属性硬编码，但破坏了原子化原则）。
如何通过 theme.extend 添加自定义遮罩工具类
最稳妥的方式是在 tailwind.config.js 中扩展 maskImage 和 maskSize 等属性，让它们能被 @apply 或直接作为 class 使用：
module.exports = {
theme: {
extend: {
maskImage: {
'radial': 'radial-gradient(circle, black 0%, transparent 70%)',
'logo': 'url(/mask.svg)',
},
maskSize: {
'full': '100% 100%',
'cover': 'cover',
}
}
}
}
之后就能这样用：
<img src="/photo.jpg" class="mask-image-radial mask-size-cover">
注意：Tailwind 5.3+ 才原生支持 maskImage 扩展；旧版本需手动加 addUtilities 注册，且要确保 PostCSS 插件已启用 postcss-mask（实际极少需要，现代浏览器原生支持 mask-image）。
使用 mask-image 时容易忽略的兼容性细节
-
mask-image在 Safari 中必须搭配-webkit-mask-image才能生效，但 Tailwind 的maskImage扩展会自动补全前缀，无需手动写 - SVG 遮罩文件路径必须是绝对路径或 public 目录下可访问路径，相对路径（如
./mask.svg）在构建后大概率 404 -
mask-mode: alpha不被所有浏览器支持（尤其是 Firefox 对 alpha 遮罩行为不一致），推荐统一用luminance或直接依赖图像明度 - 如果遮罩图是 PNG，确保它有明确的黑白灰阶——纯白区域显示，纯黑区域隐藏，灰色为半透明
替代方案：用 bg-blend-mode + 叠层模拟遮罩效果
当遮罩逻辑简单（比如渐变遮黑、顶部淡出），不用 SVG 也能快速实现：
<div class="relative w-64 h-64 bg-gradient-to-b from-transparent via-black/30 to-black/80"><img src="/photo.jpg" class="absolute inset-0 object-cover"></div>
这种做法本质是「视觉遮罩」，不改变图片本身透明度，但对 SEO 和语义化更友好；缺点是无法做镂空、复杂形状裁剪。真正需要矢量级遮罩（如 logo 剪影、不规则蒙版）时，还是得回到 mask-image。
实际项目中，多数人卡在遮罩图路径不对或没设 mask-size 导致拉伸变形——这两个点比语法本身更常导致失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
