`@apply` 不能与 ` 一起使用，因为 `.` 要么找不到... Tailwind答案

【问题标题】：`@apply` cannot be used with `` because `.` either cannot be found... Tailwind`@apply` 不能与 ` 一起使用，因为 `.` 要么找不到... Tailwind
【发布时间】：2020-08-21 22:49:04
【问题描述】：

我在 laravel mix 和 postcss 中使用了顺风。我得到了错误：

@apply 不能与.text-grey-default 一起使用，因为.text-grey-default 要么找不到，要么它的实际定义包含一个伪选择器，如:hover、:active 等。如果你确定.text-grey-default 存在，请确保所有@import 语句都得到正确处理在 Tailwind CSS 看到您的 CSS，因为 @apply 只能用于同一 CSS 树中的类。

我认为这是因为不在同一个 CSS 文件中，但我正在使用 postcss-import 来克服这个问题。标签正文没有任何伪选择器，所有的导入都在文件的顶部。我真的不明白这个问题是从哪里来的以及如何解决的。

app.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "variables";
@import url("https://fonts.googleapis.com/css?family=Nunito");
@import "@fortawesome/fontawesome-free/css/all.min.css";

body {
    @apply text-grey-default;
}

webpack.mix.js

let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let atImport = require('postcss-import');

mix.js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .options({
        processCssUrls: false,
        postCss: [
            atImport(),
            tailwindcss("./tailwind.config.js"),
        ]
    })
    .version();

tailwind.config.js

let colors = {
    "grey-default": "#636b6f",

};

module.exports = {
    colors: colors,
    textColors: colors,  
    options: {
        prefix: "",
        important: false,
        separator: ":"
    }
};

【问题讨论】：

标签： laravel laravel-mix tailwind-css postcss-import

【解决方案1】：

我已经理解我的错误了。我忘记在我的顺风配置中将颜色和文本颜色放入主题：{}。

【讨论】：