Apply tailwind css class in linear-gradient stop-color

Question

I need to use tailwind semantic css classes of tailwind.config file in SVG image inside lineargradient stop-color properties.

My react app has designer css file where hex color codes are used as var css class e.g:

--colors-accent-400: #29b6f6;

Then above class is used in tailwind.config with some class name like below:

"filter-color-css" : "var(--colors-accent-400)"

And here is my lineargardient used inside SVG:

if i use var css class in lineargradient stop-color properties like below it is working:

<linearGradient id="progress" x1="0.8" y1="15" x2="3.5" y2="0.1">
            <stop
              offset="0%"
              stopColor="var(--colors-accent-400)"
              stopOpacity="3"
            />
</linearGradient>

But if i use direct css class instead of var css it is not working.

<linearGradient id="progress" x1="0.8" y1="15" x2="3.5" y2="0.1">
            <stop
              offset="0%"
              stopColor="filter-color-css"
              stopOpacity="3"
            />
</linearGradient>

I need to use css class here instead of var css.

Answer 1

I think stopColor is expecting a color value, while you are passing a class name.
I would try using class instead.

Have a look at this example.

Answer 2

Define the Color in tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        'accent-400': '#29b6f6',
      },
    },
  },
  // ...
};

and Use the CSS Class in Your SVG.

• In your SVG, reference the color using the CSS class you defined:

<linearGradient id="progress" x1="0.8" y1="15" x2="3.5" y2="0.1">
  <stop
    offset="0%"
    stopColor="text-accent-400" <!-- Use the CSS class here -->
    stopOpacity="0.3" <!-- Adjust opacity as needed -->
  />
</linearGradient>

Note that I’ve used the text-accent-400 class, which corresponds to the color you defined in your tailwind.config.js.