Tailwind fill类未生效：SVG添加fill-primary仍显示黑色

问题原因 #

Tailwind的fill-*类是直接设置元素的fill CSS属性，但<use>元素的fill样式无法传递到它引用的外部SVG路径上——因为你引用的路径已经明确设置了fill="currentColor"，它只会继承父级的color属性，而不是读取自身的fill样式。

解决方案 #

方案1：给外层SVG加text类（推荐） #

把控制颜色的text-*类加到包裹<use>的外层<svg>上，让内部路径的currentColor继承这个颜色：

<svg className={`block w-full scale-y-75 origin-bottom text-${color-var}`}>
  <use xlinkHref="/wave.svg#wave" />
</svg>

因为你定义的color-var输出primary，最终会生成text-primary类，这个类会设置外层SVG的color属性，内部路径的currentColor就会自动继承这个值，从而显示你定义的primary颜色。

方案2：直接给设置color样式 #

如果需要单独控制<use>的颜色，可以通过style属性直接引用Tailwind生成的颜色变量：

<svg className={`block w-full scale-y-75 origin-bottom`}>
  <use
    xlinkHref="/wave.svg#wave"
    style={{ color: `var(--color-${color-var})` }}
  />
</svg>

注意：确保你的Tailwind配置已经生成了对应的颜色CSS变量（Tailwind v3+默认会为配置的颜色生成--color-*变量）。

额外检查 #

确认你的外部SVG中：

• 外层<svg>标签没有设置会覆盖继承的color属性
• 目标路径的fill确实是currentColor（你的代码里已经满足这一点）

内容的提问来源于stack exchange，提问作者katsele