Problems accessing the color value defined in the tailwind.config.js file (in scss file)

Question

in a project with Tailwind i need to darken a color defined in the tailwind.config.js (directly in the scss file).

@debug "Darken Color: #{darken(theme("colors.gray.500"), 10%)}";

This cause the error:

SassError: $color: theme("colors.gray.500") is not a color.

However when i use the notation "theme("colors.gray.500")" as value and not as a parameter of the darken function it works properly.

Can you explain me what I'm wrong and how to get the color value defined in the configuration file?

Thanks

Answer 1

It happens because SASS handled first. Usual order to handle styles is sass-loader -> postcss->loader -> css-loader. Tailwind is handled by PostCSS therefore SASS does know nothing about theme() directive

And I found this in documentation

The most important thing to understand about using Tailwind with a preprocessor is that preprocessors like Sass, Less, and Stylus run separately, before Tailwind. This means that you can’t feed output from Tailwind’s theme() function into a Sass color function for example, because the theme() function isn’t actually evaluated until your Sass has been compiled to CSS and fed into PostCSS.