Some classes are not working on production build

[dany68]

What version of Tailwind CSS are you using?

Tailwind v4.0.3

What build tool (or framework if it abstracts the build tool) are you using?

Nuxtjs app with vite

What version of Node.js are you using?

Node v22.12.0

What browser are you using?

The problem occurs on all the major browser: Chrome, Safari, Firefox

What operating system are you using?

macOS

Describe your issue

Hi thanks for your work on the new major version,

On production build with minification of the code some classes are not working. For instance: space-y-*, space-x-*, *:[grid-area:1/1]
On localhost during development there are no such problems.

[wongjn]

Would you be able to provide a reproducible example please (such as a remotely-hosted git repository)?

[Botato300]

I had that problem too, I think it is a problem with Vite build.
Issues published in the vite repository: vitejs/vite#18974

[dany68]

Thank you @Botato300, it seems to be the same issue. It makes the v4 not really usable in production for the moment.

I would be happy to help, but not sure where to start.

[philipp-spiess]

It seems like upstream bugfixing is already undergoing but in the meantime it should be possible to either disable CSS minification or use lightnigncss as a minifier instead: https://vite.dev/config/build-options#build-cssminify. I really hope this is resolved soon but since it's not really actionable for us right now I migrated this over to a discussion for now.

[dany68]

Thank you very much.
Using lightnigncss solved the problem.

[Botato300]

They are already working on a solution: evanw/esbuild@8f8962f
It will probably be fixed in the next esbuild update.