svg图标颜色不随text-blue-500变色，90%因源码残留fill/stroke内联属性截断继承链；必须删除所有硬编码颜色（包括根标签及等子元素的fill、stroke），确保内联svg且父容器显式声明可继承的color值。
SVG图标颜色不随text-blue-500这类类名变色，90%不是Tailwind配置漏了，也不是fill-current写错了，而是SVG源码里残留的fill、stroke等内联属性直接截断了CSS继承链。
为什么fill-current写了却没生效
fill-current只是fill: currentColor的别名，它完全依赖CSS继承链。但浏览器渲染时，会优先采用SVG内部硬编码的值，比如<path fill="#000"></path>或<svg fill="none"></svg>——这些内联属性比任何CSS规则都“具体”，直接覆盖currentColor。
- 打开DevTools，选中某个
<path></path>，在Computed面板里搜fill：如果值是rgb(0, 0, 0)或none，说明被内联值锁死了 -
<svg fill="none"></svg>这种写法本身就会阻止继承，必须删掉整个fill属性，不能只改成fill="currentColor" - 父容器没显式设
color（比如只在<button></button>上加了text-blue-500，但SVG被套在没样式的<span></span>里），currentColor就回退到body默认的灰色
如何手动清理SVG源码才能用fill-current
别指望加个类就自动修好。所有硬编码颜色都得从原始SVG字符串里删掉或替换。构建工具（如SVGR）导出的图标通常带一堆fill，必须人工或脚本处理。
- 删掉
<svg></svg>根标签上的fill、stroke、fill-rule等属性（例如<svg fill="none" stroke="currentColor"></svg>→ 改成<svg></svg>） - 逐个检查内部元素：
<path fill="#000"></path>、<circle stroke="#999"></circle>、<g fill="red"></g>——全部删掉这些属性，不要留fill=""空值 - 删掉
<defs><style></style></defs>块里的.cls-1 { fill: #xxx; }类规则，它们也会干扰继承 - 确保SVG是内联写法（直接贴HTML里），不是
<img src="icon.svg">或background-image
描边图标和深色模式下容易漏的关键点
fill-current只管填充，对描边无效；它也不感知dark mode，只忠实地继承当前color值。
- 描边图标（如Heroicons outline）必须同时加
stroke-current类（Tailwind v3.3+原生支持；v3.0–3.2需手动扩展theme.extend.stroke） - 深色模式下图标还是黑的？问题不在SVG，而在你设的文本色是否响应式——别用
text-gray-700，改用text-gray-900 dark:text-gray-100 - Flex容器中只写
h-5 w-5，SVG可能被压缩变形，务必加shrink-0；viewBox必须保留且合理（如viewBox="0 0 24 24"），否则缩放失真
最常被忽略的是：SVG内联后，fill-current生效的前提是父容器有明确且可继承的color值——这个值必须经过CSS计算得出，不能靠* { color: }这类通配符间接设置，否则继承链会被劫持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
