使用@layer utilities 但不存在匹配的@tailwind utilities 指令答案

【问题标题】：@layer utilities is used but no matching @tailwind utilities directive is present使用@layer utilities 但不存在匹配的@tailwind utilities 指令
【发布时间】：2023-01-16 12:49:06
【问题描述】：

我有一个 Laravel 9 项目，我想使用 Tailwind

当我将每个 component 的 css 放在一些文件中以将它们分开时，它会导致一条错误消息，但如果我将它们放在一起就可以了。

Error message:

使用 body.css @layer components 但不存在匹配的 @tailwind components 指令。

app.css:

 @import "tailwind.css";

 @import "body.css";

tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

body.css:

@layer components {
    .body {
        @apply bg-sky-100
    }
}

webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
        // require('postcss-import'),
        require("tailwindcss/nesting"),
        require('autoprefixer'),
    ])
    .webpackConfig({
        stats: {
            children: true,
        },
    })
    ;

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    darkMode: 'class',
    mode: "jit",

}

package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "autoprefixer": "10.4.7",
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.4"
    },
    "dependencies": {
        "postcss-import": "^14.1.0"
    }
}

【问题讨论】：

标签： css laravel webpack import tailwind-css

【解决方案1】：

这是为什么造成的？

根据tailwind-css docs

如果您正在编写大量 CSS 并将其组织到多个文件中，请确保在使用 Tailwind 处理它们之前将这些文件合并到一个样式表中，否则您会看到在没有相应的 @tailwind 指令的情况下使用 @layer 的错误。

如何克服这个？

使用postcss-import插件。
//postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {}, ? Add this plugin
    tailwindcss: {},
    autoprefixer: {},
  }
}

【讨论】：