`@apply`不能和``一起使用，因为`.`要么就是找不到......尾巴风

Question

我正在使用tailwind与laravel mix和postcss。 我得到的错误是

@apply 不能与 .text-grey-default 因为 .text-grey-default 要么找不到，要么它的实际定义中包含了一个伪选择器，如:hover、:active等。如果你确定 .text-grey-default 的存在，确保任何 @import 语句得到正确处理 之前 尾风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();

尾风.配置.js

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

};

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

Answer 1

我已经明白了我的错误。我忘了在我的尾风配置中的主题:{}中加入颜色和文字Colors。