@Layer实用程序已使用，但没有匹配@TailWind Utilities指令

Question

我有一个Laravel 9项目，我想使用尾风CSS。

当我将每个组件的CSS放在某些文件中以将它们分开时，它会导致错误消息，但是如果我将所有内容都放在一起。

body.css 中的错误消息

@layer使用组件，但没有匹配@TailWind组件指令。

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.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"
    }
}

Answer 1

您需要使用 build noreferrer'> build time intimps 以确保 @>确保 @ @进口是在尾风处理之前处理的。

尾风文档中有一个部分，您可以参考在这里/a>。

但是，您已经在依赖项中拥有Postcss-import，应该在webpack.mix.js

仅供参考，这是推荐的订购（在”遇到一些问题：

• PostCSS-Import
• tailwindcss/嵌套
• parwindcss
• autoPreeFixer

Answer 2

正如其他人提到的那样，在需要postcss-import插件之前，需要postwindcss v3。但是，从V4开始，此问题不再发生。

从tailwindcss v4开始

在v3中，tailwindcss软件包是邮政插件，但是在v4中，Postcss插件生活在专用的@tailwindcss/postcss/postcss 软件包中。

。

此外，在V4 Imports和供应商中，现在可以自动为您处理，因此您可以删除Postcss-import和autoprefixer如果它们在您的项目中。

• 升级指南：使用Postcss -a> - tailwindcss v3 to v4 to v4
• ：//stackoverflow.com/a/79403000/15167500“>弃用：预处理程序支持 stackoverflow

直到tailwindcss v3

预处理器提供的最有用的功能之一是能够将CSS组织到多个文件中，并通过处理@import提前在浏览器中进行处理，而不是在浏览器中进行组合。

用于使用PostCSS处理此操作的规范插件是Postcss-import。

要使用它，请通过NPM安装插件：

  NPM安装-D PostCSS -Import
 

然后将其添加为PostCSS配置中的第一个插件：

  // Postcss.config.js
Module.exports = {
  插件：{
    'Postcss-import'：{}，
    parwindcss：{}，
    AutoPrefixer：{}，
  }
}
 

• 构建时间导入 - tailwindcss v3 docs（仔细阅读整个文本以完全了解其工作原理。）
• tailwindlabs/parwindlabs/parwindcss＃5934： @layerer Upities使用，但没有使用，但没有匹配的@tailwind Uniforities指令 - 来自Adamwathan - github- tailwindcss v3