时间戳

首页 > 解决方案 > `@apply` 不能与 ` 一起使用，因为 `.` 要么找不到... Tailwind

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

问题描述

我正在使用带有 laravel mix 和 postcss 的顺风。我得到错误：

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

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

应用程序.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: ":"
    }
};

标签： laravellaravel-mixtailwind-csspostcss-import

解决方案

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

推荐阅读