Fill for svg/path not applying

Question

I have svg that I apply 2 colors through props one for background works and the other for fill doesn't. I'm using Next.js.

export default function Divider({
  topColor,
  bottomColor,
}: {
  topColor: string;
  bottomColor: string;
}) {
  return (
    <svg
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1200 120"
      preserveAspectRatio="none"
      className={`bg-${bottomColor}`}
    >
      <path
        d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
        className={`fill-${topColor}`}
      ></path>
    </svg>
  );
}

<Divider topColor="cyan-950" bottomColor="slate-50" />

DividerIMG

Strange thing is I can see class being applied in dev tools class="fill-cyan-950" but as you can see in the image above it doesn't show on the screen (it's black should be dark blue/green). If I do it explicitly in the code without props it works as intended.

score 0 · Accepted Answer · answered Jul 28 '23 at 16:27

As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full:

Always use complete class names
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

You could consider passing full class names in the props like:

<Divider topColor="fill-cyan-950" bottomColor="bg-slate-50" />

<svg
  …
  className={bottomColor}
>
  <path
    …
    className={topColor}
  ></path>
</svg>

Fill for svg/path not applying

1 Answers1