spedley's avatar

Nested Tailwind CSS Not Compiling

Hi! I've been using Laravel Mix with nested Tailwindcss for a while with no issues. Now I've got a new Laravel 9 app 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'),
            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.

Thanks!

0 likes
7 replies
aurelianspodarec's avatar

You have a spelling mistake resources/css/app.pcss I think that should be resources/css/app.css

spedley's avatar

@aurelianspodarec - thanks very much for the response. As far as I'm aware, .pcss is the correct extension for PostCSS docs and it worked just fine previously. If I switch the documents to straight-up .css, PHPStorm flags the nesting as incorrect syntax and it still doesn't compile.

aurelianspodarec's avatar

@spedley Never heard of it, interesting. I got .css in my file like so

mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    
]);

mix.disableSuccessNotifications();

But if it worked I suppose that's something else.

Did you try to uninstall node modules and install them again? I had something similar ish when going from Laravel 8 to laravel 9.

What does your package JSON looks like?

Mine looks like

{
    "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": {
        "@tailwindcss/forms": "^0.4.0",
        "autoprefixer": "^10.4.2",
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "postcss-import": "^14.0.2",
        "tailwindcss": "^3.0.18"
    },
    "dependencies": {
        "@hotwired/turbo": "^7.1.0",
        "particles.js": "^2.0.0"
    }
}

Could always try with my webpack and package see if that works maybe.

spedley's avatar

@aurelianspodarec Firstly, I really appreciate your replies. :)

Secondly yep - your .css file pretty much matches my default when I start a project and if I compile it in that way, it works just fine. But my pcss is nested and when it compiles (incorrectly because of the nesting) I receive this warning from Laravel Mix:

(7:5) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin before Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

And when I try to add the recommended nesting support per the tailwindcss link in the warning above by adding tailwind/nesting line below in my webpack.config.js file:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.pcss', 'public/css',
        [
            require('postcss-import'),
            require('tailwindcss/nesting'), <-- THIS CAUSES THE ISSUE
            require('tailwindcss'),
            require('autoprefixer'),
        ])
    .favicon()
    .alias({
        '@': 'resources/js',
    });


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

the compile fails with the error detailed in my original post.

1 like
aurelianspodarec's avatar

@spedley I see. Not sure in that case. The only thing I would assume is it could have to do with versioning of something maybe? Have you tired the TailwindCSS discord see if they can help there perhaps?

spedley's avatar

Getting back at this after being heads down on a deadline - excellent suggestion. I'll post again once I'm able to resolve.

1 like
Scott P's avatar

@spedley Any news on your issue? I'm stuck on the same issue as you were having.

Please or to participate in this conversation.