Search code examples
reactjssvgtailwind-css

Apply tailwind css class in linear-gradient stop-color

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.

Solution

  • 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.