skip to Main Content

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


  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.

    Login or Signup to reply.
  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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search