Watch command throws "JavaScript heap out of memory" while using with tailwindcss

• Laravel Mix Version: 6.0
• Node Version (node -v): 15.4
• NPM Version (npm -v): 6.14.8
• OS:

Description:

I am using laravel-mix with tailwindcss and compiling with SASS. When running on “npm run watch”, the first compilation takes some time but does it successfully. After i make a small change on one of the file, the command throws error like “FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory”.

I hoped that it would be solved in version 6 but it still persists. After trying out these solutions on #2470 and others but still to no vein.

So far debugging it i found that if i don’t import @tailwind utilities, there’s no any issue. However I do not have any work around it.

Here’s my webpack.mix.js file:

// Compile SASS/CSS.
mix.sass( `${devPath}/scss/app.scss`,             'css', sassConfig )    
    .options({
        processCssUrls: false,
	    postCss: [ tailwindcss('./tailwind.config.js') ]
    })

My app.scss file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'settings/_index';
@import 'tools/_index';

[jamesburrow23]

@ponopress not sure if you’re still having this issue but I was able to work around it by adjusting my package.json file to include the node module flag to increase the maximum memory (in my example to 8000 MB):

"scripts": {
  "development": "NODE_OPTIONS=\"--max-old-space-size=8000\" mix "
}

[mikebronner]

In case anyone is looking for the reference to building tailwind using NPX, see the following page: https://tailwindcss.com/docs/installation#building-your-css