When working with SVGs and tailwind, I tried using a fill-primary on one of the instances, but for some reason my SVG remains black.
<svg width="9622" height="127" viewBox="0 0 9622 127" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="wave" d="..." fill="currentColor"/>
</svg>
<svg className={`block w-full scale-y-75 origin-bottom`}>
<use
xlinkHref="/wave.svg#wave"
className={`fill-${color-var}`}
<--! ${color-var} outputs primary -->
/>
</svg
My color settings are defined in my tailwind.config.js, as I am also using multiple instances of bg-color elsewhere in my code.