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).

[kiily]

Hey @ceodigvijay, I happen t be using the same stack and I am seeing this as well, memory just skyrockets as it tries to build it out, I have not observed this in production. Should we raise this as a bug? Maybe there is something we need to do with tailwind. I suspect it is because it tries to build tailwind for every page or something but just an idea. Even then, it feels like a lot of memory.

[kiily]

I have have found that disabling react dev tools and increasing the node memory somewhat mitigates the problem but otherwise devtools are unusable.

It's hardly ideal at this point, I have followed a bunch of advice on splitiing the tailwind imports but saw no significant changes.

I have put some links together in the notion doc above. The issue seems to be related to tailwind with postcss as well

[kiily]

One other time I noticed this happening was when I accidentally created a circular reference by creating a .uppercase class and then @applying uppercase inside of it... otherwise afraid I'm not sure.

You have a repo you can share where this happens?

I could observe the slowness on the example repo already. I have looked around for circular imports, we don't have many custom classes but sadly nothing there 😢 thanks for the idea tho

[kunKun-tx]

@kiily
I am testing the tailwindcss-jit. Almost a drop-in replacement for the regular version. I only needed to adjust some @apply usages in custom classes. So far so good.

Might also want to check out the demo video

Update: I have been using tailwindcss-jit the whole afternoon and it worked wonders. HMR has been much faster and memory usage has been low. I did see cpu spiking up from time to time but still it's much better than before and I suspected it's some of my strict eslint rules messing things up. Also, the build time had been greatly reduced as well.

[kiily]

Nice, thanks for this, I saw this tool literally yesterday. Will give it a shot on my side too, looks super simple. Fingers crossed 🤞 Will report back

[kiily]

Dayummm this is fire, was taking 20s before, now down to ~1s🔥 upvote @kunKun-tx's comment so people can see the solution

[leerob]

The solution here is to use the new Tailwind JIT Compiler!

The Tailwind + Next.js has also been updated.

[cibulka]

If some Googler stumbles upon this, do not install the library @leerob mentions above - it is deprecated.

The solution that is supported at the moment (Tailwindcss ^2.2.19) is adding mode: 'jit' to your theme file.

[timneutkens]

I've updated the url in Lee's post 👍 thanks @cibulka