bg-conic not working in next.js production builds

[Multiply]

What version of Tailwind CSS are you using?
v4.1.6

What build tool (or framework if it abstracts the build tool) are you using?
Next.js 15.3.2

What version of Node.js are you using?
v22.11.0

What browser are you using?
Chrome

What operating system are you using?
macOS

Reproduction URL
https://github.com/Multiply/next.js-tailwind-conic-bug
(based on npx create-next-app@latest for the initial commit)

Describe your issue
In next.js production builds (npm run build -> npm run start) bg-conic's background-image does not work.
It works fine in development builds npm run dev.

My initial thoughts would be that it's a @layer issue, but I haven't played too much with it yet, to really debug it further.

[wongjn]

Debugged the difference with @tailwindcss/cli --minify. The key difference stopping it from working is:

+++ Next.js
--- @tailwindcss/cli
 @property --tw-gradient-from-position {
   syntax:"<length-percentage>";
   inherits:false;
+  initial-value:0
-  initial-value:0%
 }

It seems like some extra CSS minifier strips the percentage sign from the above @property value, causing the gradient to stop working.

You can workaround this by adding the class name from-0% but probably not ideal.

[Multiply]

• initial-value:0

• initial-value:0%
  It seems like some extra CSS minifier strips the percentage sign from the above @property value, causing the gradient to stop working.

I noticed this initially, and assumed 0 was an accepted value for syntax: "<length-percentage>";
It seems like it does this for other values as well.

[RobinMalfait]

Hey!

This is happening because of a minifier used in Next.js. As a workaround, you could add this workaround to your next.config.js file:

const nextConfig = {
  webpack(config) {
    // Disable CSS minification
    config.optimization.minimizer = config.optimization.minimizer.filter((fn: any) => {
      return !fn.toString().includes("CssMinimizerPlugin");
    });

    return config;
  },
}
module.exports = nextConfig

Or use ESM / TypeScript, the important part is the webpack config to remove the CSS minifier.

[Multiply]

Are there any tickets tracking this issue that you know of, @RobinMalfait?

[RobinMalfait]

@Multiply not yet, I have to create a minimal reproduction and open an issue, but wanted to give you a workaround in the meantime.

[Multiply]

Following some breadcrumbs, this might have fixed it?
cssnano/cssnano#1695

Edit:
Seems like nextjs@canary is using [email protected] that doesn't contain the above PR, so maybe upgrading to 7.0.7 could do something.

[RobinMalfait]

That might fix it, but I also think that Next.js is bundling the dependency instead of relying on it as an actual dependency. They also use cssnano-simple: https://github.com/vercel/next.js/tree/canary/packages/next/src/bundles/cssnano-simple

[Multiply]

That might fix it, but I also think that Next.js is bundling the dependency instead of relying on it as an actual dependency. They also use cssnano-simple: https://github.com/vercel/next.js/tree/canary/packages/next/src/bundles/cssnano-simple

Yes, that's where I got the above package from, as they include that in there.

[Multiply]

As a follow-up, I'm confident the PR I referenced earlier does not fix the underlying issue. It's only about <percentage> and quotes around it, it doesn't affect <length-percentage>. (See my comment here: cssnano/cssnano#1695 (comment))

I'd assume if we just add one more condition there, it'll be solved.

Edit: I've added a PR to solve it here: cssnano/cssnano#1702

[RobinMalfait]

Opened an upstream issue with a reproduction:

• Issue: Incorrect CSS minification when using next build vercel/next.js#79149
• Reproduction: https://github.com/RobinMalfait/nextjs-incorrect-css-minification