Replies: 20 comments 4 replies
-
|
I encountered the same CSS minification error in Next.js 14.2.23. My dependencies:
Also running on Ubuntu 20.04.6 LTS |
Beta Was this translation helpful? Give feedback.
-
|
We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate. Why was this issue marked with the
|
Beta Was this translation helpful? Give feedback.
-
|
@apiwatja Did you get this resolved? I am getting the same thing all of a sudden and track it done to fix it. It also seems like this came out of nowhere because any code changes I have made recently are not connected to anything css related and I have not installed any new packages or anything. |
Beta Was this translation helpful? Give feedback.
-
|
I am getting this same issue. This only happens when using I have tried running a Docker build from scratch with --no-cache. I am using tailwind 4. |
Beta Was this translation helpful? Give feedback.
-
|
I am having the exact same problem.
Maybe we should open a Tailwind-issue also? |
Beta Was this translation helpful? Give feedback.
-
|
I have fixed this! It seems to be something to do with the build process not using the postcss config. My postcss.config.mjs was not being included in my Docker build. I updated my Dockerfile to include -
|
Beta Was this translation helpful? Give feedback.
-
Does not work for me unfortunately. I did this and still get the error.
|
Beta Was this translation helpful? Give feedback.
-
|
I have a few different steps in my docker, so have to copy the postcss config into my deps stage, then in my build stage I am copying it from the deps stage to the build stage along with my node_modules. Does your postcss exist in your Docker container at the build stage if you check? Also might be worth checking if you're using .js or .mjs. I had the issue of not realising which JS file type I was using... |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
For me I am not using Docker. I only noticed an issue when I got a failed deployment notification from Vercel for the dev branch I was working on. I also tried to run build locally and get the same error. I don't get an issue for local dev server when just running npm run dev I am using Tailwind, but this project is still on 3.4.16 so if it is tailwind related it ins't specific to just the new 4.0. adding this to nextConfig allows the build to happen But as mentioned in earlier comments it isn't a workable solution as it can't be used in production. Just thought I would mention that using that did allow the build. I don't use Docker so I don't know much about its build process, but for me my postcss.config.mjs is there and is the exact same file since the start of the process with tailwindcss as the only plugin. I have not looked much into Tailwind 4.0 other than watching one YT video just to see some of the new features and what breaking changes there would be for an upgrade path. I think one of the things mentioned was the removal of using both a tailwind.config and a postcss.config and everything just being installed directly into the global css file. Maybe this is what is causing the issue, even though I have not upgraded and still on the earlier version, maybe something they did is affecting next.js builds. Seems like this recent Tailwind change is the most likely issue as the upgrade to 4.0 was very recent and I have not done anything with this branch I am working on that should be causing this error all of sudden. |
Beta Was this translation helpful? Give feedback.
-
|
I had a similar bug, but I was able to build it correctly by disabling /** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
'@tailwindcss/postcss': {
optimize: { minify: false },
},
},
};
export default config; |
Beta Was this translation helpful? Give feedback.
-
Here is a repo which reproduces the issue: https://github.com/connershoop/bug-css-minification-postcss-tailwind/tree/main.This repo was created using It seems @tailwindcss/postcss is attempting to minify arbitrary files which one would not expect it to. steps to reproduce
Fixes:
to Error: |
Beta Was this translation helpful? Give feedback.
-
|
Regarding this, I think it is quite difficult to say whether the Next.js side should fix it or not. I think it's more like a problem with TailwindCSS's className auto-recognition feature. |
Beta Was this translation helpful? Give feedback.
-
|
@NEKOYASAN Yeah—it seems like there could be a variety of ways that it you could come across the error. I will be moving this in discussions in the meantime until we can confirm this is a bug on Next.js's side. |
Beta Was this translation helpful? Give feedback.
-
|
Hello. I think I am having a similar issue. I used the following repo to deploy my next js v15+ + payload CMS v3+ app.
My postcss.config.js file (after modified): My build logs with error (before modifying postcss config): My build logs with error (after modifying postcss config): I would really like to use payload CMS in my next web app, but I cannot seem to develop locally and push to vercel production. I am trying to run |
Beta Was this translation helpful? Give feedback.
-
|
I had a similar issue using NextJS 15 and Tailwind v4. I was able to build the solution using To reproduce the error when building the application locally, I tried modifying the tailwind config to narrow in the possible files to find the error. Tailwind has a build in system for detecting class-syntax that it will parse through the minifier as described here To narrow in the source of the error I disabled the automatic source detection when importing tailwindcss, and then gradually added more parts of the solution like so @import 'tailwindcss' source(none);
@source "../pages";
@source "../hooks";
...
@source "../components";I eventually found that the error would appear only when including the Looking at the Tailwindcss documentation, it describes how sources are detected automatically and that files mentioned in
In my case, the I ended up having something like this in my dockerfile |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, fixed it for me and reduced the build time by almost five minutes. |
Beta Was this translation helpful? Give feedback.
-
|
Same here, that fixed it for me and reduced my build time by 40s. |
Beta Was this translation helpful? Give feedback.
-
|
@Jehduend94, thank you. it really helpful, fixed issue and speed up build time |
Beta Was this translation helpful? Give feedback.
-
|
Thank you 🙏! I'm not using docker, but this tip helped resolve my issue too. credit to tailwindlabs/tailwindcss#17092 (comment) too |
Beta Was this translation helpful? Give feedback.
-
|
For anyone having issues with Vercel deployment can also make sure your .gitignore file gets added by adding it to the allow list: https://vercel.com/docs/deployments/vercel-ignore#allowlist So in your
|
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure if this helps anyone, but here's what I found. The error that simply states "unclosed block" is very unhelpful. The first thing I did was to turn off minification in my module.exports = {
plugins: {
'@tailwindcss/postcss': {
optimize: {
minify: false,
}
}
}
};then I ran the Changing this is what fixed it for me Hope this helps any of y'all |
Beta Was this translation helpful? Give feedback.
-
|
I think I figured out a workaround. There is a mixup in the package.json as to where the tailwind and postcss declaration should sit... dependencies or devDependencies. tailwindcss/postcss tailwindcss and postcss were all moved away from devDependencies into dependencies and this seems to work for me. I know typically they should be in devDependencies.. but when I put them there.. I get the "Unclosed block" when I run npm run build The only way this worked for me was to also run npm uninstall tailwindcss @tailwindcss/postcss postcss followed by npm install tailwindcss @tailwindcss/postcss postcss (which inserted these into dependencies section) followed by npm run build (which was successful) and then I added my postcss.config.mjs export default { |
Beta Was this translation helpful? Give feedback.
-
|
Solution from here worked for me: |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Link to the code that reproduces this issue
https://github.com/apiwatja/20250209-css-minification-issue.git
To Reproduce
Reproduction Steps
Create a Next.js 15 project with Tailwind CSS
Install vaul package
Run production build
Build fails during CSS minification
Current vs. Expected behavior
Issue
Production builds fail when CSS minification is enabled in Next.js 15. The error points to an "Unclosed block" issue during the minification process. While direct CSS minification through cssnano works fine, Next.js's built-in minification process fails.
Error Description
During production build (next build), the process fails with a CSS minification error. The error occurs specifically when processing CSS from the vaul package's style.css.
GitHub Action Error:
Provide environment information
Which area(s) are affected? (Select all that apply)
Webpack
Which stage(s) are affected? (Select all that apply)
Other (Deployed)
Additional context
Additional Context
Direct minification of the CSS files using cssnano works fine
The issue appears to be specific to Next.js 15's built-in minification process
Multiple attempts to configure postcss and cssnano options did not resolve the issue
The error is reproducible in both local and CI/CD environments
Current Workaround
The issue can be worked around by disabling CSS minification in next.config.mjs:
Beta Was this translation helpful? Give feedback.
All reactions