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

[ponopress]

• 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 is very slow and sometimes 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 screen.scss file:

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

@import 'settings/_index';
@import 'tools/_index';
@import 'generic/_index';
@import 'elements/_index';
@import 'components/_index';
@import 'blocks/_index';
@import 'vendor/_index';
@import 'utilities/_index';

I have posted the problem in the larvel mix repo too but could not get any solution.