Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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.

Tags:

2

Answers


  1. 0

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

    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