ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

[chz]

Version

@nuxtjs/tailwindcss: 5.0.0-4 nuxt: 2.15.8

Reproduction Link

Private project. Big project

Steps to reproduce

In a big project after hot reload many times i get FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory.

Hot reload time 10-11s

What is Expected?

What is actually happening?

After switch v4.2.1 version it works good. Hotreload time is 1-2s

[Atinux]

Actually the v5 is made to be used with Nuxt 3

[chz]

Actually the v5 is made to be used with Nuxt 3

Please update documentation and write "Nuxt2 is not supported". Its not clear that Nuxt 2 is not supported. And its only for Nuxt 3

[aviramaz]

@Atinux / @pi0 Is it official that we won't have nuxt2+tailwind3? It's a big announcement which wasn't officially communicated till now

[Atinux]

@aviramaz have you try to follow this guide? https://tailwindcss.com/docs/guides/nuxtjs

[Rasool-deldar]

@aviramaz have you try to follow this guide? https://tailwindcss.com/docs/guides/nuxtjs

Hi, I used tailwind 3 in nuxt 2 - I installed it both through the documentation and tailwind-nuxt site itself - tailwind, but unfortunately it gives me the same error.

[cossssmin]

@aviramaz have you try to follow this guide? tailwindcss.com/docs/guides/nuxtjs

One issue that I've noticed is that when you're using target: 'static' and adding Tailwind like recommended in their docs, Nuxt 2 seems to strip out some of the CSS that relates to CSS variables that enable ring utilities.

For example instead of this:

... you get this:

As you can see, that results in ring utilities not working, because some CSS variable is somehow being stripped.

This is not an issue when using target: 'server' or when developing locally with nuxt dev, thus me mentioning this here first instead of opening an issue with Tailwind CSS.

[cossssmin]

EDIT 2: disabling CSS minification solves this:

build: {
  html: {
    minify: {
      minifyCSS: false
    }
  }
}

EDIT: looks like it might be Vite build minification causing it: https://github.com/tailwindlabs/tailwindcss/discussions/7000

☝️ Looks like the problem is that all base CSS variables that don't have a value are being stripped when doing nuxt generate with target: 'static' in nuxt.config.js

In this case, the moment I manually add --tw-ring-inset: ; in dev tools, it all works as expected:

[zenatshockbyte]

@aviramaz have you try to follow this guide? https://tailwindcss.com/docs/guides/nuxtjs

Switching to this manual install seems to be way more performant (earlier we had ~7s hot reload build time, now around 1-2s) and does not cause memory issues (or at least not as quickly)

[ineshbose]

Closing this issue as it is believed to be resolved/stale now - please feel free to comment if it is still an issue in the latest version of the module.