Laravel Mix - Nested Tailwind CSS Not Compiling

Question

I've been using Laravel Mix with nested Tailwindcss for a while with no issues. Now I've got a new Laravel 9 build and I'm getting this error when I attempt to compile:

ERROR in ./resources/css/app.pcss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.pcss)
  Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
  TypeError: Cannot set properties of undefined (setting 'parent')
      at AtRule.removeChild (/Users/ed/Sites/supernifty/node_modules/postcss/lib/container.js:219:38)
      at Rule.remove (/Users/ed/Sites/supernifty/node_modules/postcss/lib/node.js:78:19)
      at processApply (/Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:427:31)
      at /Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:16:9
      at /Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/processTailwindFeatures.js:47:50
      at plugins (/Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/index.js:33:58)
      at LazyResult.runOnRoot (/Users/ed/Sites/supernifty/node_modules/postcss/lib/lazy-result.js:339:16)
      at LazyResult.runAsync (/Users/ed/Sites/supernifty/node_modules/postcss/lib/lazy-result.js:393:26)
      at async Object.loader (/Users/ed/Sites/supernifty/node_modules/postcss-loader/dist/index.js:97:14)

Child mini-css-extract-plugin /Users/ed/Sites/supernifty/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!/Users/ed/Sites/supernifty/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!/Users/ed/Sites/supernifty/resources/css/app.pcss compiled with 1 error

ERROR in ./resources/css/app.pcss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot set properties of undefined (setting 'parent')
    at AtRule.removeChild (/Users/ed/Sites/supernifty/node_modules/postcss/lib/container.js:219:38)
    at Rule.remove (/Users/ed/Sites/supernifty/node_modules/postcss/lib/node.js:78:19)
    at processApply (/Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:427:31)
    at /Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:16:9
    at /Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/processTailwindFeatures.js:47:50
    at plugins (/Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/index.js:33:58)
    at LazyResult.runOnRoot (/Users/ed/Sites/supernifty/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/Users/ed/Sites/supernifty/node_modules/postcss/lib/lazy-result.js:393:26)
    at async Object.loader (/Users/ed/Sites/supernifty/node_modules/postcss-loader/dist/index.js:97:14)
    at processResult (/Users/ed/Sites/supernifty/node_modules/webpack/lib/NormalModule.js:758:19)
    at /Users/ed/Sites/supernifty/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/ed/Sites/supernifty/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/ed/Sites/supernifty/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/Users/ed/Sites/supernifty/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/ed/Sites/supernifty/node_modules/postcss-loader/dist/index.js:142:7)

webpack compiled with 2 errors

webpack.config.js:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.pcss', 'public/css',
        [

            require('postcss-import'),
            require('tailwindcss/nesting'), <-- compiles with config warning if removed
            require('tailwindcss'),
            require('autoprefixer'),
        ])
    .favicon()
    .alias({
        '@': 'resources/js',
    });


if (mix.inProduction()) {
    mix.version();
}

Any hints as to what I may be doing wrong would be greatly appreciated.

Answer 1

I had the same problem and luckily got it fixed when I wrapped my CSS from my custom css inside the according layer directives. Removing the @layer directive would then cause the issue again. See https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer

/* custom-components.css */

@layer components {
/* custom css */
}

Also I'd made sure to correctly import the source and custom css, since I'm using postcss-import. See https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

@import "tailwindcss/base";
@import "./custom-base.css";

@import "./custom-components.css";
@import "tailwindcss/components";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

Additionally my postcss config for reference.

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: { config: "./tailwindcss-config.js" },
    autoprefixer: {},
    "postcss-preset-env": {
      features: { "nesting-rules": false },
    },
  },
};