I was using a 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:

colors: {
  main: 'rgb(var(--color-main) / <alpha-value>)',
}

Now instead of main-500 I have just main which is defined by CSS variable. When I’m trying to use bg-hatch-main in dev tools instead of my color variable I’m getting Tailwind’s 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?