fill-current 是最简方案，但需父元素设置 color 才生效；IE 不支持，需 fallback；自定义 fill 类须配置 theme.extend.fill；SVG 内联 fill 属性必须删除，否则 CSS 无效；描边需用 stroke-current 并配 stroke-width。
fill-current 是最简方案，但必须配合 color 才生效
直接给 <svg> 加 fill-current 类不会自动变色——它只是把 fill 值设为 currentColor，而 currentColor 必须从父元素的 color 属性继承。很多人写了 fill-current 却没反应，是因为父容器没设 color。
正确用法是组合使用：<button class="text-blue-600"><svg class="fill-current w-5 h-5">...</svg></button>。此时 SVG 内部所有未覆盖 fill 的 <path> 都会变成蓝色。
- 父元素只需有
color值（哪怕只是color: inherit），不一定要写死颜色 -
fill-current本身不生成颜色类，它依赖已有的text-*类或自定义color - IE 完全不支持
fill: currentColor，Edge 12+ 才开始支持；需兼容 IE 时得 fallback 到预设类名如fill-blue-500
需要自定义 fill 类？改 tailwind.config.js 的 theme.extend.fill
Tailwind 默认只提供 fill-current，不生成 fill-red-500 这类类名。如果你频繁用固定色填充 SVG（比如品牌红圆点），就得手动扩展 fill 工具类。
在 tailwind.config.js 中添加：
立即学习“前端免费学习笔记（深入）”；
theme: {
extend: {
fill: theme => ({
'brand': theme('colors.red.500'),
'success': theme('colors.green.600'),
'disabled': theme('colors.gray.400')
})
}
}
之后就能用 fill-brand、fill-success 等类直接控制填充色。
- 必须用
theme.extend.fill，不能直接写theme.fill，否则会清空默认的current支持 - 这些类只作用于 SVG 子元素（
<path>、<circle>），对<svg>标签本身无效 - 若同时要响应深色模式，得额外加
dark:fill-brand-dark并在theme.extend.fill里定义对应值
SVG 源码带内联 fill="#000"？删掉它，否则 CSS 无效
从 Figma、Illustrator 或图标库复制的 SVG，常带 <path fill="#000"> 这类内联属性。它的优先级高于外部 CSS，导致 fill-current 或 fill-brand 全部失效。
解决办法不是加 !important，而是清理源码：
- 手动删掉所有
<path>、<circle>、<rect>上的fill和stroke属性 - 保留
viewBox、d、width、height等结构属性 - Figma 导出时勾选 “Clean IDs & Colors”，或用正则批量替换
fill="[^"]*"为空字符串 - 如果某部分必须固定颜色（如心形中心红点），单独给它加
class="fixed-red"，再写.fixed-red { fill: #e53935; }
描边（stroke）也要同步变色？用 stroke-current
fill-current 只影响填充，对描边无效。纯线性图标（如 Heroicons）靠 stroke 显示，这时得用 stroke-current。
和 fill-current 一样，它也依赖父元素的 color 值：
<span class="text-indigo-500"> <svg class="stroke-current w-6 h-6">...</svg> </span>
Tailwind v3.3+ 默认支持 stroke-current；旧版本需在配置中显式启用：
theme: {
extend: {
stroke: { current: 'currentColor' }
}
}
-
stroke-current和fill-current可共存，一个 SVG 里既有填充又有描边时分别控制 - 若需自定义 stroke 类（如
stroke-brand），同样走theme.extend.stroke扩展 - 注意：描边要可见，还得配
stroke-width，光有stroke-current不够
fill="#000" ——它们像幽灵一样挡在你写的 CSS 前面，不清理就永远看不到效果。 
