mask-image配合currentcolor能动态变色，因mask-image仅控制可见区域，而svg中fill设为currentcolor可继承父级color；须用内联svg或base64 data url，且safari需加-webkit-mask-image前缀。
mask-image配合currentColor为什么能动态变色
因为 mask-image 本身不渲染颜色，只定义“哪些区域可见”，而 SVG 内部的 currentColor 会继承父元素的 color 值——两者一结合，就能让图标随文字颜色实时变化，不用写多套 fill 颜色。
常见错误是直接把 SVG 当作 <img> 引入，这时 currentColor 失效（<img> 是独立文档上下文）；或者用了 background-image + SVG data URL 却忘了对 # 编码，导致解析失败。
- 必须用内联 SVG 或 CSS mask-image 引用 base64/data URL 格式 SVG，确保样式可继承
- SVG 源码里所有
fill、stroke都得设为currentColor，不能写死#000或red - mask-image 的 SVG 必须是单色（纯黑/透明），否则遮罩逻辑错乱——黑色区域显示，透明区域隐藏
Tailwind 中用 background-image + mask-image 的最小可行写法
Tailwind 默认不提供 mask-image 工具类，得手动在 theme.extend.backgroundImage 或 @layer utilities 里加。别试图用 bg-[...] 动态写 data URL，编码和引号容易出错。
推荐做法：把 SVG 转成 base64 后注册为自定义背景图，再组合 bg-no-repeat、bg-center 和 mask-size 等已有工具类。
- 用在线工具（如 svg2base64）转 SVG → base64，注意删掉 XML 声明和换行
- 在
tailwind.config.js的theme.extend.backgroundImage加一项：'icon-search': "url('data:image/svg+xml;base64,PHN2Zy...')" - HTML 中写：
<div class="w-5 h-5 bg-icon-search mask-[url('/icons/search.svg')] bg-no-repeat bg-center text-blue-600"></div>（注意 mask-url 要和实际路径一致，或也走 base64）
mask-image 在 Safari 上不生效的典型原因
Safari 对 mask-image 支持要求更严：它不接受 mask-image: url(...) 直接写 data URL，也不认缩写语法（比如 mask 复合属性），还强制要求 -webkit-mask-image 前缀。
错误现象是图标完全不显示，或显示为纯色方块。不是 Tailwind 问题，是 CSS 兼容性裸漏。
- 必须同时写
-webkit-mask-image和mask-image，且值完全一致 - 避免在 mask-image 中使用
currentcolor—— Safari 对 mask 内部 color 继承支持不稳定，改用固定黑#000更稳妥 - 如果用插件（如
tailwindcss-masks），确认它生成了 -webkit 前缀，否则白配
比 mask-image 更轻量的替代方案：inline SVG + fill-current
如果只是想让图标随文本变色，且不需要复杂遮罩（比如渐变填充、裁剪形状），fill-current 是最简单可靠的方案——Tailwind 原生支持，无兼容性问题，也不用处理 base64 或前缀。
适用场景：按钮里的小图标、导航项、表单标签旁的 icon。不适用：需要背景图定位的响应式图标、或要叠加滤镜/阴影的复杂视觉效果。
- SVG 必须内联到 HTML 中，不能
<img>或<use></use>引用外部文件 - 给 SVG 根元素加
class="w-5 h-5 text-red-500 fill-current"，内部所有fill属性删掉或设为currentColor - 注意
fill-current只影响fill，若 SVG 有stroke，需额外加stroke-current
真正麻烦的从来不是怎么写，而是搞清你到底需不需要 mask —— 大部分所谓“自定义图标”需求，fill-current 就够了。mask-image 是为特定视觉控制存在的，不是通用解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
