<p>fill-current 不生效主因是 SVG 内联 fill/stroke 属性覆盖 CSS，需手动清理源码并确保父容器有 text-* 类提供 color 上下文。</p>
fill-current 不生效，90% 是 SVG 源码没清理干净，不是 Tailwind 配置或类名写错了。
为什么 fill-current 看似写了却没变色
根本原因在于浏览器样式优先级：内联 fill 属性（比如 <path fill="#333">）会直接覆盖 CSS 中的 fill: currentColor，而 fill-current 编译后就是这条 CSS 规则。它没有魔法，只是普通声明。
- 打开 DevTools，选中 SVG 内部的
<path>，看 Computed 标签页里fill的最终值——如果不是currentColor或计算后的颜色，说明被内联值锁死了 - 检查父容器是否真有
color值：比如<div class="text-blue-500"><svg>...</svg></div>才有效；如果只在<body>设了color，中间某层用了color: inherit却没传下去，currentColor就会回退为默认黑 - Tailwind v2.x 或未启用
corePlugins.fill时，fill-current不可用——确认tailwind.config.js中corePlugins: { fill: true }已开启（v3.0+ 默认开）
必须手动清理 SVG 源码才能让 fill-current 生效
别指望加个类就自动修好。所有硬编码颜色都得从 SVG 字符串里删掉或替换。
- 删掉
<svg>标签上的fill、stroke属性（例如<svg fill="none" stroke="currentColor">→ 改成<svg>） - 逐个检查内部元素：
<path fill="#000">、<circle stroke="#999">、<g fill="red">—— 全部删掉这些属性，或统一改成fill="currentColor"/stroke="currentColor" - 删掉
<defs><style>块里的.cls-1 { fill: #xxx; }类规则，它们也会干扰 - 确保 SVG 是内联写法（直接贴 HTML 里），不是
<img src="icon.svg">或 background-image
fill-current + stroke-current 要配合使用才完整
单靠 fill-current 只能控制填充色，图标若有描边（stroke），它完全不生效。
立即学习“前端免费学习笔记（深入）”；
- Tailwind v3.3+ 原生支持
stroke-current，可直接加在 SVG 或其子元素上 - 旧版需手动扩展：在
tailwind.config.js的theme.extend.stroke中加'current': 'currentColor' - 更稳妥的做法是同时写：
<svg class="fill-current stroke-current text-blue-500">，并确保父容器有text-*类提供 color 上下文 - 注意
stroke-width不是默认工具类，要用stroke-[2]（启用 arbitrary values）或自定义strokeWidth扩展
深色模式下 fill-current 容易漏掉的关键点
fill-current 本身不感知 dark mode，它只忠实地继承当前 color 值。所以问题不在 SVG，而在你设的文本色是否响应式。
- 别用
text-gray-700这种非响应式色值——浅色下是灰，深色下还是灰，图标不会变亮 - 必须显式写成
text-gray-900 dark:text-gray-100或text-slate-800 dark:text-slate-200 - 如果图标来自第三方组件（如 Heroicons），确认它导出的是 React/Vue 组件而非静态
<img>；否则你加的类根本进不到内联 SVG 里 -
fill-current在伪元素（::before）中无效——content: url()加载的 SVG 是独立图像上下文，无法继承currentColor
最常被忽略的其实是 SVG 引入方式和源码清洁度。哪怕 Tailwind 配置完美、类名拼写正确，只要 SVG 里还躺着一个 fill="#000"，fill-current 就永远是摆设。
