@layer utilities is used but no matching @tailwind utilities directive is present

Question

I have a Laravel 9 project and I want to use the Tailwind

When I put each component's css in some files to separate them, it cause an error message but if I put all together works.

Error message:

body.css @layer components is used but no matching @tailwind components directive is present.

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

Genagenappe

Answer 1

You need to use Build-time imports to make sure @imports are handled before Tailwind processes them.

There is a section in the Tailwind docs that you can reference here.

However, you already have postcss-import in your dependencies, you should uncomment it in webpack.mix.js and move it above Tailwind, and you should be good to go.

FYI, this is the recommended ordering (referenced in nesting docs) otherwise you may run into some issues:

• postcss-import
• tailwindcss/nesting
• tailwindcss
• autoprefixer

Thermosiphon