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规则，浏览器直接忽略这条声明。

永远拿不到currentColor

这是最隐蔽也最常被误判的问题：把SVG当图片用标签引入，再指望父级color: red能让图标变红，结果图标始终是SVG源码里写死的颜色（比如fill="#000"）。根本原因是创建的是独立文档上下文，currentColor无法穿透过去。

• SVG文件里硬编码的fill、stroke属性会直接覆盖继承逻辑
• 即使你删了这些属性，加载方式本身就不支持currentColor透传
• 用background-image或同样无效，它们都隔离渲染上下文

内联SVG才能真正响应currentColor

只有把SVG代码直接写进HTML（即内联），fill="currentColor"或stroke="currentColor"才会生效。但光这样还不够，还得满足三个条件：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父容器必须有可计算的color值（不能是inherit或unset）
• 标签自身要能继承到这个color，建议加class="text-red-500"或style="color: inherit;"
• SVG源码中所有显式的fill、stroke属性（包括）必须全部删除，否则它们优先级高于currentColor

Vue/React项目里容易被忽略的转义陷阱

框架在注入SVG时可能把fill="currentColor"自动转义成fill="%23000"，导致DOM里实际渲染的是十六进制色值而非关键字。调试时务必打开开发者工具，检查最终渲染出的标签上是不是还写着fill="currentColor"。

另外，currentColor在background-color中不被IE11和Safari 15.4之前版本支持，伪元素里用它做背景色会静默失效——这不是bug，是规范限制。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！