fill-current不生效的三大硬条件是：SVG未内联、源码残留fill/stroke内联属性、父元素无明确color值；需同时满足才能使currentColor正常继承。
fill-current 不生效？先检查这三个硬条件
它不是“一键变色”开关，而是 fill: currentColor 的封装，失效几乎都卡在结构或配置上。
-
<img src="icon.svg">引入的 SVG 完全无效——currentColor无法穿透独立文档上下文 - SVG 源码里残留
fill="#000"或stroke="red"等内联属性，浏览器优先级高于 CSS，必须手动删干净 - 父元素没设
color值，比如只写text-blue-500在<button>上，但 SVG 被包在没样式的<span>里，currentColor就回退到body的默认灰（#1f2937） - Tailwind v2.x 或未启用
corePlugins.fill的项目，fill-current类根本不会编译出来
描边图标（如 Heroicons outline）怎么同步变色
单靠 fill-current 不行，因为 outline 图标靠 stroke 显形，fill 可能为空。
- 确保 SVG 内部路径用的是
stroke="currentColor"，不是stroke="#374151"这类固定值 - 加
stroke-current类——Tailwind v3.3+ 原生支持；v3.0–3.2 需手动在tailwind.config.js中扩展：module.exports = { theme: { extend: { stroke: { 'current': 'currentColor' } } } } - 若同时有填充和描边，
fill-current和stroke-current得一起加在同一个<svg>元素上 -
stroke-current不影响粗细，stroke-width得另配stroke-1、stroke-2等类
深色模式下图标颜色错乱怎么办
常见表现是暗色主题里图标还是黑的，本质是用了非响应式文字色，currentColor 继承的是静态计算值。
- 别用
text-gray-700这种固定类——它在亮/暗模式下都输出同一 HEX 值 - 改成
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
只写 w-5 h-5 很危险，Flex 默认允许子项收缩（shrink），SVG 可能被压成 0×0。
立即学习“前端免费学习笔记（深入）”；
- 加
shrink-0锁住尺寸，确保图标始终按设定渲染 -
viewBox必须保留且合理（如viewBox="0 0 24 24"），否则缩放失真 - 别把
fill-current用在伪元素（::before）里——它只对真实<svg>元素生效 - 如果图标来自第三方组件库（如 Heroicons React），确认它导出的是可传
className的组件，而不是静态<img>
fill-current 再灵，SVG 没内联或带内联属性就直接失效。这些不是配置问题，是结构前提。 
