CSS syntax issue with parenthesis during Vite build in a TailwindCSS v4 project

[HappyDancer99]

I’m facing a strange CSS syntax problem when trying to build my project. It was functioning properly until a couple of days ago, likely after I updated some packages.

When I execute the build command, I encounter this warning:

npm run build

> build  
> vite build

vite v6.2.5 building for production...
✓ 2 modules transformed.
Generated an empty chunk: "app".
rendering chunks (1)...warnings when minifying css:
▲ [WARNING] Unexpected ")" [css-syntax-error]

    <stdin>:7:153265:
      7 │ ...or:var(--color-zinc-100)}:where(){width:calc(var(--spacing)*5);h...
        ╵                                    ^


public/build/manifest.json              0.27 kB │ gzip:  0.14 kB
public/build/assets/app--Cil65mr.css  190.86 kB │ gzip: 26.36 kB  
public/build/assets/app-l0sNRNKZ.js     0.00 kB │ gzip:  0.02 kB
✓ built in 607ms

When I create a fresh project, the syntax error does not occur, though I still see the empty chunk message.

Here’s what my package.json file looks like:

{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite dev", 
        "watch": "vite build --watch"
    },
    "dependencies": {
        "@tailwindcss/vite": "^4.1.1",
        "autoprefixer": "^10.4.21",
        "axios": "^1.8.4",
        "concurrently": "^9.1.2",
        "laravel-vite-plugin": "^1.2.0",
        "tailwindcss": "^4.1.1",
        "vite": "^6.2.5"
    },
    "optionalDependencies": {
        "@rollup/rollup-linux-x64-gnu": "4.39.0",
        "@tailwindcss/oxide-linux-x64-gnu": "^4.1.1",
        "lightningcss-linux-x64-gnu": "^1.29.3"
    }
}

Has anyone experienced this issue? Any help would be greatly appreciated.

[scarlettturner]

This looks like a Vite CSS processing issue with TailwindCSS v4’s new oxide engine. The syntax error happens during minification - there’s an unexpected closing parenthesis in a calc() expression with CSS variables.

Since it broke after your recent package updates, I’d check your vite.config.js first. Look for any custom CSS processing rules that might clash with the new TailwindCSS engine. Also check if you’ve got @apply directives or custom CSS using complex calc() expressions - the oxide compiler can be picky about these.

If that doesn’t help, try temporarily downgrading packages to figure out which update broke things. Then you can hunt for compatibility patches or config tweaks for that specific version.

[Dave_17Sketch]

This looks like a CSS minification issue with TailwindCSS v4 and Vite. The error shows malformed CSS around the :where() selector. I hit something similar upgrading to v4 - it’s how the new engine handles certain utility combos. Add css: { minify: false } to your vite.config.js temporarily. If the build works without minification, you’ve found your problem. Also check for custom utilities or plugins that aren’t v4 compatible yet. Since a fresh project works fine, something in your existing CSS or config is generating bad syntax during build.

[MarkSeeker91]

hey! had the same prob b4. clearing node_modules & reinstalling often works. also, check if you have any custom css with calc() — those can mess up builds. let me know if that helps!