v4: @tailwindcss/vite: Invalid css in @theme section causes the styles to be silently broken in production build only

[tkafka]

What version of Tailwind CSS are you using?

"@tailwindcss/vite": "^4.0.0"

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

"vite": "^6.0.5"

What version of Node.js are you using?

v22.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/tkafka/tailwind-v4-css-parsing-bug/tree/main

Describe your issue

The above demo demonstrates, how a single typo in @theme section in style.css causes the page to have broken css in production. The dev build is fine, and there is no error message in production. This can let to a single typo silently breaking the production.

Reproduction steps:

1. Install dependencies:

pnpm install

2. Dev build looks fine:

pnpm dev

3. Production build has broken styling, no error is produced:

pnpm build && pnpm preview

This is caused by a typo in style.css in --shadow-inset-bad - it has invalid rgb(var(from --color-secondary-500) r g b / 0.08) instead of rgb(from var(--color-secondary-500) r g b / 0.08) (from is in the wrong place).

Commenting out the --shadow-inset-bad style causes the production build to have a proper styling.

This seems like an error caused by different behavior of css parsing in development vs. in production. I believe that either the parser should work in a same way in development and production mode, or it should report found errors in css.

[rrmesquita]

Something as simple as a missing semi-colon is enough to silently "break" the build.

• The build completes "successfully" without any real CSS output;
• No errors are shown when running the build command;
• No errors are shown in my editor (this should probably be taken care of in another issue).

My setup an (almost) clean Laravel 11 installation. Here are my app.css contents:

@import 'tailwindcss' // missing semi-colon
@source '../views';

[RobinMalfait]

@rrmesquita that seems like a separate issue to me. If you can open a new issue for this that would be awesome 🙏

[RobinMalfait]

Hey! What's happening here is that during development, Tailwind CSS itself doesn't super care about the actual values being used as long as the structure is the same. This sort of behaves like CSS in the browser where an invalid declaration would just be ignored.

We could of course add a lot of validation, but that would make everything more complex and even wrong the moment you use a feature that Tailwind CSS doesn't include yet or validates against.

During development everything should work as expected apart from the one spot where you wrote invalid CSS. This behavior stays the same, but at least everything else works.

Now, what was happening when doing a production build?

In production builds, we use Lightning CSS to optimize the CSS, handle nested syntax, add fallbacks for colors, etc. When they encounter an issue, it looks like they remove the faulty CSS and then continue. In your case that meant that the entire @layer theme {…} block was gone.

What we did as part of #18918, we now show the warnings from Lightning CSS if something goes wrong. This means that you now should get some insights when something goes wrong.

E.g.:

This will be available in the next release.