I was using an utility for hatched background:

plugin(({ matchUtilities, theme }) => {
      matchUtilities(
        {
          'bg-hatch': (value) => {
            return {
              backgroundImage: `repeating-linear-gradient(120deg, ${value}, ${value} 1px, rgba(255, 255, 255, 0.2) 1px, rgba(255, 255, 255, 0.2) 3px )`,
            };
          },
        },
        { values: flattenColorPalette(theme('colors')), type: 'color' },
      );
    }),

I used bg-hatch-main-500 in my code
Everything worked great until i decided to add custom colors, which user provide into my app and I add them to tailwind config via css variables
Now instead of main-500 I have just main which defined by css variable.
When Im trying to use bg-hatch-main In dev tools instead of my color-variable I’m getting tailwinds function for color(i guess)

.bg-hatch-main {
background-image: repeating-linear-gradient(120deg,({opacityValue =1})=>oldValue.replace("<alpha-value>",opacityValue),({opacityValue =1})=>oldValue.replace("<alpha-value>",opacityValue) 1px,hsla(0,0%,100%,.2) 1px,hsla(0,0%,100%,.2) 3px);
}

How can I fix this issue and make it work with dynamic colors?
Thanks in advance