[v15] Css minify with tailwind doesn't seem to be supported

[welfoz]

Summary

Hi everyone!

I want to have minified css to reduce build size and make https://pagespeed.web.dev/ happy.

Tailwind need postcss, so we cannot use the experimental flag "useLightningcss: true"

I tried:

• with or without cssnano
• with or without cssChunking flag
• with or without inlineCss flag
• with "optimize: { minify: false }," for the "@tailwindcss/postcss"

I'm running out of ideas...

Anyone know how to get tailwind css minified with nextjs app router v15?

Thanks a lot in advance!

Additional information

tailwind v4. It was the same with v3.
nextjs v15.1.3

Example

No response

[icyJoseph]

Hi,

This might sound silly, but what do you mean? I did a create-next-app, built it, using tw4, and the CSS file I got, has two lines. Everything is minified. I know if you look at the CSS in your browser network tab, it is "beautified"

 bat .next/static/css/e03eda6107bdcc2a.css | wc -l
       2

Could you post a link to the CSS file? Maybe something has been modified in your next.config.js? or what is the actual PageSpeed/Lighthouse complaint?

[welfoz]

Thank you for your answer Joseph!

The css file also looks minified on my side. And then "beautified" in the browser too.

How is it possible?
Does it mean the css file is sent minified from the server to the client and then "beautified" in the client browser?

[icyJoseph]

It's cuz of Source Maps, https://web.dev/articles/source-maps, it is no harm for your end user experience.

You can disable the "beautified" view like this:

Screen.Recording.2025-05-04.at.16.03.13.mov

There are other ways of course, but to get to my point, that's enough.

[welfoz]

ohh, it makes sense, thank you so much!

[icyJoseph]

No worries, please don't forget to mark also as answered :)