访问 tailwind.config.js 文件（在 scss 文件中）中定义的颜色值时出现问题

Question

在使用 Tailwind 的项目中，我需要使 tailwind.config.js 中定义的颜色变暗（直接在 scss 文件中）。

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

这导致错误：

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

然而，当我使用符号“theme("colors.gray.500")”作为值而不是 darken 函数的参数时，它可以正常工作。

你能解释一下我错在哪里以及如何获取配置文件中定义的颜色值吗？

谢谢

Answer 1

发生这种情况是因为 SASS 先处理了。处理样式的通常顺序是 sass-loader -> postcss->loader -> css-loader。 Tailwind 由 PostCSS 处理，因此 SASS 对 theme() 指令一无所知

我在文档中找到了 this

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.

访问 tailwind.config.js 文件（在 scss 文件中）中定义的颜色值时出现问题

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

css

sass

scss-mixins

tailwind-css

tailwind-3