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

Question

To replicate the issue you can use this example and run in the dev environment.

https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

The above example have also very high memory usage in dev environment which is not so common for next js applications.

I have tried the combination of different versions of tailwindcss and Next.js but the issue persists. PS: I am using Ubuntu 20.04 (If this would help in any way).

I have set up Gulp for Tailwindcss and pm2 to restart when memory exceeds 1024 MB. I know this setup is very annoying but I didn't found any other solution for this. — Digvijay singh, Jan 14 '21 at 12:50

score 1 · Answer 1 · answered Jun 24 '21 at 17:47

I too encountered this error FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory when I integrated Tailwind(2.2.2) on my NextJS (10.2) project.

Some github-issue discussions on Memory Leaks points to the use of optimized <Image/> component of NextJs. So I've temporarily reverted back to img tag and it's stable so far.

No an ideal solution but give it a try.

Also I've disabled JIT mode of Tailwind in development.

Github Discussions #1 #2

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

1 Answers1

Linked