#layer utilities is used but no matching #tailwind utilities directive is present - css

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

Answer 1

Why is this caused ?
According to tailwind-css docs
If you are writing a lot of CSS and organizing it into multiple files, make sure those files are combined into a single stylesheet before processing them with Tailwind, or you’ll see errors about using #layer without the corresponding #tailwind directive.
How to overcome this ?
Use postcss-import plugin.
//postcss.config.js
module.exports = {
plugins: {
'postcss-import': {}, 👈 Add this plugin
tailwindcss: {},
autoprefixer: {},
}
}