fill-current没让SVG变色，根本原因是它只是fill: currentColor的封装，失效必因三个硬条件未满足：SVG未内联、源码残留fill/stroke内联属性、父元素无明确color值。
fill-current 为什么没让 SVG 变色
它不是开关，是 fill: currentColor 的封装，失效基本都卡在三个硬条件上：
• SVG 必须内联写法（<svg></svg>），用 <img src="icon.svg"> 完全无效
• SVG 源码里所有 fill、stroke、fill-rule 等内联属性必须删干净，否则浏览器优先级更高
• 父元素或自身必须有明确的 color 值，比如 text-blue-500，只写 fill-current 不会自动变色
• Tailwind v3.0+ 默认启用，v2.x 需检查 tailwind.config.js 中 corePlugins.fill 是否为 true
描边图标（如 Heroicons outline）怎么同步变色
单靠 fill-current 不管用，因为 outline 图标靠 stroke 显形：
• 确保 SVG 内部路径用的是 stroke="currentColor"，不是固定值如 stroke="#374151"
• 加 stroke-current 类（Tailwind v3.3+ 原生支持；v3.0–3.2 需手动加插件或写 stroke-[#3b82f6]）
• 若同时要填充+描边变色，fill-current 和 stroke-current 得一起加在同一个 <svg> 元素上
• 注意：stroke-current 不影响 stroke-width，粗细得另配 stroke-1、stroke-2 等类
深色模式下图标颜色错乱怎么办
常见表现是暗色主题里图标还是黑的，本质是用了非响应式文字色：
• 别用 text-gray-700 这种固定值，它在深色模式下不会切换
• 改成 text-gray-900 dark:text-gray-100，让父容器的 color 随主题变，fill-current 才能继承正确值
• 如果图标需要 hover 变色，记得给 hover:text-red-500 同时加 dark:hover:text-red-400
• 多色图标不适用这套逻辑——fill-current 只能统一控制填充色，无法单独调某个 <path> 的颜色
SVG 尺寸变形或被 Flex 压缩怎么防
加 shrink-0 是最直接的解法：
• Flex 容器中只写 w-5 h-5，SVG 可能被压缩到 0 宽高
• shrink-0 锁住尺寸，确保图标始终按设定渲染
• viewBox 必须保留且合理（如 viewBox="0 0 24 24"），否则缩放失真
• 别把 fill-current 用在伪元素（::before）里——它只对真实 SVG 元素生效
立即学习“前端免费学习笔记（深入）”；
