Next.js 10.0.3 gives Javascript heap out of memory error in dev environment with Tailwind CSS (PostCSS Plugin)

[ceodigvijay]

Describe the problem:
I am using TailwindCSS 2.0.2 with Next.js 10.0.3.
TailwindCSS plugin is causing very high memory requirement for Next.js (Node.js process eats all memory), sometimes it also throws Javascript heap out of memory error.

Hot reloading is slow (even if I manage it in some way) but the real pain is Next.js+tailwinds setup takes 3-4x memory compared to others (like I was using Bulma)
With Next.js+Bulma/Bootstrap setup = ~250mb
With Next.js+TailwindCSS as PostCSS plugin = ~800mb-1.5gb memory

Link to a minimal reproduction:
Clone this repo.
https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

and run it in next.js dev environment and watch out your memory usage (generally it remains around 200-300MB but with Tailwinds 1.2GB).

I tried to debug it and as soon as I disable tailwinds plugin in PostCSS everything again goes normal.

The real problem seems to be in tailwinds PostCSS Plugin, is there any way to reduce memory usage or fix this issue?

PS: The real problem is I don't want to trigger Out of memory error on the server during the build time.
I am using UBUNTU 20.04 on the local system (just to know this is not a problem related to OS).

[joshxyzhimself]

I've personally experienced this whenever I'm updating my tailwind config frequently on my project that is simply webpack + react, my solution was of course to close that webpack --watch --mode=development process and manually restart it

[caenguidanos]

Same problem!

[joshxyzhimself]

Would also like to add that I am also using Ubuntu 20.04, could be relevant or not

[Xetera]

I'm getting this too even without the template. Everything is fine when you build the server for production but something with the dev server seems to be causing issues and even locking up chrome dev tools on the frontend. Although I'm still trying to figure out if that last bit is caused by something on my end.

[awareness481]

This is a known issue tailwindlabs/tailwindcss#2820 (comment) , upgrading to 2.0.2 should help although it doesn't completely remove the performance issues.

[ceodigvijay]

This is a known issue tailwindlabs/tailwindcss#2820 (comment) , upgrading to 2.0.2 should help although it doesn't completely remove the performance issues.

I tried different versions including (0.x, 1.x and 2.x) but the issue persists. It may not be related to versions.

[awareness481]

This is a known issue tailwindlabs/tailwindcss#2820 (comment) , upgrading to 2.0.2 should help although it doesn't completely remove the performance issues.

I tried different versions including (0.x, 1.x and 2.x) but the issue persists. It may not be related to versions.

Yes, the issue still persists but 2.0.2 has some important improvements. See tailwindlabs/tailwindcss#3032

[ceodigvijay]

This is a known issue tailwindlabs/tailwindcss#2820 (comment) , upgrading to 2.0.2 should help although it doesn't completely remove the performance issues.

I tried different versions including (0.x, 1.x and 2.x) but the issue persists. It may not be related to versions.

Yes, the issue still persists but 2.0.2 has some important improvements. See tailwindlabs/tailwindcss#3032

Yes I did noticed 2.0.2 was slightly better then others with memory usage but still very bad, it needs much more improvements.

[joeinnes]

I ran into this issue and turned out my purge rules were not well written. I changed my purge block to:

  purge: {
    enabled: process.env.NODE_ENV === "production",
    content: [
      "./{components,pages}/**/*.{js,ts,jsx,tsx}"
    ],
  },

And now it builds fine.