最简单可靠的方式是用 stroke-current 或 fill-current 配合文字颜色类，但需确保 SVG 内联且无硬编码 fill/stroke 属性（包括 fill="none"），否则 currentColor 无法生效。
直接用 stroke-current 或 fill-current 配合文字颜色类，是最简单、最可靠的方式；但前提是 SVG 源码不能带硬编码的 fill 或 stroke 属性，否则 CSS 会被无视。
为什么 text-red-500 对 SVG 图标没反应？
常见现象：给 加了文字颜色类，图标却还是黑色或默认色。根本原因不是 Tailwind 失效，而是 SVG 内部存在显式声明：
-
fill="#000"、stroke="blue"这类内联属性会强制覆盖currentColor -
fill-current无法介入 - 使用
currentColor完全不可穿透——它运行在独立文档上下文中
正确写法：内联 SVG + stroke-current/fill-current
必须把 SVG 写成内联标签，并清理所有硬编码颜色值。关键点：
- 移除所有
fill、stroke属性（包括fill="none"） - 在
标签上加class="stroke-current text-blue-500"（适用于纯描边图标，如 Heroicons Outline） - 若需填充（如 Solid 风格），改用
class="fill-current text-purple-600"，并确保子元素无fill声明 - 对混合类型图标（既有描边又有填充），可同时设
stroke-current fill-current，它们都会继承text-*类定义的color
Tailwind 的 stroke 和 fill 工具类怎么配？
Tailwind 默认只生成响应式变体（sm:stroke-red-500），不支持 hover: 或 focus:。如需交互态控制，得手动扩展配置：
module.exports = {
theme: {
extend: {
stroke: {
current: 'currentColor',
red: '#ef4444',
}
}
},
variants: {
extend: {
stroke: ['hover', 'focus']
}
}
}
之后就能写 stroke-current hover:stroke-red-500。注意：stroke-current 是固定关键字，不是从 theme.stroke 读取的值；它等价于 stroke: currentColor。
遇到 Safari 不渲染或颜色错乱怎么办？
Safari 对 mask-image + currentColor 支持极差，且部分旧版对 fill="currentColor" 解析不稳定。稳妥做法：
- 避免在 SVG 源码里写
fill="currentColor"，全部交给外部 class 控制 - 不用
- 检查开发者工具的 Computed Styles，确认
fill或stroke最终解析为rgb(239, 68, 68)而非currentColor字符串——后者说明继承链被截断 - 如果用了 CSS 变量方案（如
--primary），别漏掉 alpha 通道变量，否则text-primary/70会失效
最常被忽略的一点：SVG 的 viewBox 必须存在，否则某些浏览器会忽略 currentColor 行为；哪怕只是 viewBox="0 0 24 24"，也得写上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
