fill-current有效是因为它依赖CSS继承机制，仅在内联SVG中生效；而img引用的SVG是独立文档上下文，无法继承外部color值。
直接给 SVG 加 fill-current 类，再配合任意 text-* 类（比如 text-blue-500），就能让图标颜色实时跟随文字色——但前提是 SVG 必须内联、且内部不能有硬编码的 fill 或 stroke 属性。
为什么 fill-current 有效，而 img 标签里引用 SVG 不行
fill-current 本质是 fill: currentColor，它依赖 CSS 继承机制：SVG 子元素（如 <path></path>）会读取父容器的 color 计算值。但这个链路只在内联 SVG 中成立。
-
<img src="icon.svg" alt="如何在Tailwind CSS中给SVG图标着色_使用fill-current与text颜色类" >是独立文档上下文，currentColor指向的是它自己的根元素（通常是黑色），无法继承外部容器的color - 用
<svg>...</svg>直接写在 HTML 里，<path></path>才能真正“看到”外层text-blue-500设置的color - 即使用了
<use href="#icon"></use>引用外部<symbol></symbol>，也属于跨作用域，currentColor默认不穿透（需额外配置fill="currentColor"在<use></use>上）
fill-current 不生效的三个高频原因
不是类名写错，而是环境或结构没配对。
- SVG 内部路径带了
fill="#000"或stroke="red"这类内联属性——它们优先级高于 CSS，必须手动删掉或导出时取消默认填色 - 父容器没设
color，例如只写了text-blue-500在<button></button>上，但 SVG 被套在没样式的<span></span>里，<span></span>的color是inherit，最终回退到body的灰色 - Tailwind 版本低于 v3.0：旧版需确认
tailwind.config.js中corePlugins.fill已启用，或手动添加fill: { current: 'currentColor' }到theme.extend
描边图标、深色模式、悬停变色怎么处理
单靠 fill-current 只能控制填充，描边、响应式、交互态得补上对应逻辑。
立即学习“前端免费学习笔记（深入）”；
- 描边图标（如 Heroicons outline）：确保 SVG 内部用的是
stroke="currentColor"，并加stroke-current类（Tailwind v3.3+ 原生支持；v3.0–3.2 需自定义插件或写stroke-[#3b82f6]） - 深色模式适配：别用
text-gray-700这种固定色，改用text-gray-900 dark:text-gray-100，否则图标在暗色下还是黑的 - 悬停时图标和文字不同色：用
group+group-hover:text-red-500控制文字，再给 SVG 单独加group-hover:fill-red-500（注意此时不能用fill-current，因为要脱离继承、强制指定色值）
最易被忽略的一点：SVG 的 viewBox 和宽高设置会影响缩放行为，h-5 w-5 后务必加 shrink-0，否则 Flex 容器可能把它压缩变形——颜色再准，图标歪了也没用。
