dark:fill-white对SVG图标无效，因为Tailwind不原生支持fill属性，不会生成对应CSS规则；引入SVG时currentColor无法穿透独立文档上下文；仅内联SVG并删除所有显式fill/stroke、确保父级有可计算color值且未被框架转义，才能使currentColor生效。
为什么dark:fill-white对SVG图标无效
因为Tailwind的dark:变体只作用于它自己定义的工具类（比如dark:text-blue-500），而fill不是Tailwind原生管理的属性——哪怕你写了dark:fill-white，Tailwind也不会生成对应CSS规则，浏览器直接忽略这条声明。
<img src="icon.svg" alt="为什么Tailwind CSS的SVG图标无法继承父级CSS颜色？" >永远拿不到currentColor
这是最隐蔽也最常被误判的问题：把SVG当图片用<img alt="为什么Tailwind CSS的SVG图标无法继承父级CSS颜色？" >标签引入，再指望父级color: red能让图标变红，结果图标始终是SVG源码里写死的颜色（比如fill="#000"）。根本原因是<img alt="为什么Tailwind CSS的SVG图标无法继承父级CSS颜色？" >创建的是独立文档上下文，currentColor无法穿透过去。
- SVG文件里硬编码的
fill、stroke属性会直接覆盖继承逻辑 - 即使你删了这些属性，
<img alt="为什么Tailwind CSS的SVG图标无法继承父级CSS颜色？" >加载方式本身就不支持currentColor透传 - 用
background-image或<object></object>同样无效，它们都隔离渲染上下文
内联SVG才能真正响应currentColor
只有把SVG代码直接写进HTML（即内联），fill="currentColor"或stroke="currentColor"才会生效。但光这样还不够，还得满足三个条件：
- 父容器必须有可计算的
color值（不能是inherit或unset） -
<svg></svg>标签自身要能继承到这个color，建议加class="text-red-500"或style="color: inherit;" - SVG源码中所有显式的
fill、stroke属性（包括<svg fill="..."></svg>）必须全部删除，否则它们优先级高于currentColor
Vue/React项目里容易被忽略的转义陷阱
框架在注入SVG时可能把fill="currentColor"自动转义成fill="%23000"，导致DOM里实际渲染的是十六进制色值而非关键字。调试时务必打开开发者工具，检查最终渲染出的<path></path>标签上是不是还写着fill="currentColor"。
立即学习“前端免费学习笔记（深入）”；
另外，currentColor在background-color中不被IE11和Safari 15.4之前版本支持，伪元素里用它做背景色会静默失效——这不是bug，是规范限制。
