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.
2
Answers
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.
Define the Color in tailwind.config.js
and Use the CSS Class in Your SVG.
Note that I’ve used the text-accent-400 class, which corresponds to the color you defined in your tailwind.config.js.