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';