Open
Description
Link to the code that reproduces this issue
https://github.com/RobinMalfait/nextjs-incorrect-css-minification
To Reproduce
next dev
will result in the correct result:

next build && next start
will result in the incorrect result:

Current vs. Expected behavior
Given CSS like this:
.example {
border: 2px solid red;
width: 100px;
height: 100px;
background-image: conic-gradient(in oklch decreasing hue, oklch(0.491 0.27 292.580994) var(--tw-gradient-from-position), oklch(0.897 0.196 126.665001) 50%, oklch(0.491 0.27 292.580994) 100%);
}
@property --tw-gradient-from-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%
}
This will work as-is in development mode because no minification is happening. Once you run a production build, the initial-value: 0%
is defined as initial-value: 0
which makes the CSS property invalid.
I expect that the initial-value
stays the same and not break when running a production build.
You also don't get any errors, so it might not be obvious that this bug happened.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:47 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T6000
Available memory (MB): 65536
Available CPU cores: 10
Binaries:
Node: 23.11.0
npm: 10.9.2
Yarn: N/A
pnpm: 9.15.1
Relevant Packages:
next: 15.4.0-canary.33 // Latest available version is detected (15.4.0-canary.33).
eslint-config-next: N/A
react: 19.1.0
react-dom: 19.1.0
typescript: N/A
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
CSS
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
Related issue: tailwindlabs/tailwindcss#17977