[v4] Angular compilation errors in Docker are preventing TailwindCSS from working.

[johnadrian63]

What version of Tailwind CSS are you using?

TailwindCSS v4.0

What build tool (or framework if it abstracts the build tool) are you using?

• Docker Desktop 4.38.0
• Node:22-alpine
• Angular 19.1.4 (CLI, Core)
• Typescript 5.7.2
• PostCSS 8.5.1
• TailwindCSS 4.0.4

What version of Node.js are you using?
Node:22-alpine (Docker image)

What browser are you using?
Chrome

What operating system are you using?
Windows 11 Pro 64-bit

Reproduction URL
https://github.com/johnadrian63/tailwind-docker

Describe your issue
I have an Angular application that uses TailwindCSS v4. It works perfectly on my local machine, but when I run it inside a Docker container, I encounter compilation errors that prevent TailwindCSS from functioning properly.

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.
Here is the compilation errors that I encountered:

2025-02-08 13:20:41 
2025-02-08 13:20:41 > webclient@0.0.0 start:webapp
2025-02-08 13:20:41 > ng serve --project=webapp --configuration development --port 4200 --host 0.0.0.0 --poll 800
2025-02-08 13:20:41 
2025-02-08 13:20:42 
2025-02-08 13:20:42 Warning: This is a simple server for use in testing or debugging Angular applications
2025-02-08 13:20:42 locally. It hasn't been reviewed for security issues.
2025-02-08 13:20:42 
2025-02-08 13:20:42 Binding this server to an open connection can result in compromising your application or
2025-02-08 13:20:42 computer. Using a different host than the one passed to the "--host" flag might result in
2025-02-08 13:20:42 websocket connection issues. You might need to use "--disable-host-check" if that's the
2025-02-08 13:20:42 case.
2025-02-08 13:20:42     
2025-02-08 13:20:42 Component HMR has been enabled.
2025-02-08 13:20:42 If you encounter application reload issues, you can manually reload the page to bypass HMR and/or disable this feature with the `--no-hmr` command line option.
2025-02-08 13:20:42 Please consider reporting any issues you encounter here: https://github.com/angular/angular-cli/issues
2025-02-08 13:20:42 
2025-02-08 13:20:42 ❯ Building...
2025-02-08 13:21:08 ✔ Building...
2025-02-08 13:21:08 Initial chunk files | Names         |  Raw size
2025-02-08 13:21:08 polyfills.js        | polyfills     |  90.20 kB | 
2025-02-08 13:21:08 styles.css          | styles        |  61.93 kB | 
2025-02-08 13:21:08 main.js             | main          |   2.37 kB | 
2025-02-08 13:21:08 
2025-02-08 13:21:08                     | Initial total | 154.50 kB
2025-02-08 13:21:08 
2025-02-08 13:21:08 Application bundle generation complete. [26.484 seconds]
2025-02-08 13:21:08 
2025-02-08 13:21:08 ▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
2025-02-08 13:21:08 
2025-02-08 13:21:08     projects/webapp/src/styles.css:2174:11:
2025-02-08 13:21:08       2174 │     https: //github.com/Brooooooklyn/nice/actions !important;
2025-02-08 13:21:08            ╵            ~~
2025-02-08 13:21:08 
2025-02-08 13:21:08 
2025-02-08 13:21:08 ▲ [WARNING] Expected "}" to go with "{" [css-syntax-error]
2025-02-08 13:21:08 
2025-02-08 13:21:08     projects/webapp/src/styles.css:2611:27589:
2025-02-08 13:21:08       2611 │ ...b2R5IHtcclxuICBib3JkZXI6IHNvbGlkIDFweCByZWQ7XHJcbn1cclxuIl19 */
2025-02-08 13:21:08            │                                                                   ^
2025-02-08 13:21:08            ╵                                                                   }
2025-02-08 13:21:08 
2025-02-08 13:21:08   The unbalanced "{" is here:
2025-02-08 13:21:08 
2025-02-08 13:21:08     projects/webapp/src/styles.css:2203:23:
2025-02-08 13:21:08       2203 │   .\[uri\:\/hoge\/\*\] {

Steps to reproduce:

1. Download Docker Desktop
2. Download this github repo https://github.com/johnadrian63/tailwind-docker
3. Go to the root directory of the project and run this docker command to build the image docker build -t docker-test5-webclient-app -f ${PWD}/webclient/projects/webapp/Dockerfile .
4. Next, run this command to run the container docker run --name docker-test5-webclient-app --env-file ./webclient/config/.env -d -p 8080:4200 -v ${PWD}/webclient/projects/webapp:/app/projects/webapp docker-test5-webclient-app
5. Go to Docker Desktop and check the container logs. (Please see the screenshot I provided above)

Here is the content of my Dockerfile:

FROM node:22-alpine AS webclient
WORKDIR /app

COPY webclient/package*.json .

RUN rm -rf node_modules package-lock.json \
  && npm install -g @angular/cli@19.1.5 \
  && npm install

COPY webclient/.angular ./.angular
COPY webclient/.postcssrc.json ./
COPY webclient/angular.json .
COPY webclient/tsconfig.json .
COPY webclient/projects/webapp ./projects/webapp

CMD if [ "${ENVIRONMENT}" = "development" ]; then npm run start:webapp; else ng build; fi


# build image
# docker build -t docker-test5-webclient-app -f ${PWD}/webclient/projects/webapp/Dockerfile .
# run image
# docker run --name docker-test5-webclient-app --env-file ./webclient/config/.env -d -p 8080:4200 -v ${PWD}/webclient/projects/webapp:/app/projects/webapp docker-test5-webclient-app

[chriswoodie]

Seeing this too but not on every build...

[ext-dflopes]

I have the same issue, any idea on how to fix this, or what causes this issue?

[djimonta]

I’m experiencing the same issue with Angular 19 and Tailwind v4.

When running Tailwind inside Docker, the generated CSS file contains some malformed classes, including one with a /*, which unintentionally starts a multiline comment. This invalidates the rest of the CSS file.

As a temporary workaround, I’m using the following commands before npm run build inside Docker.
It’s not ideal, but it works for now:

RUN npx @tailwindcss/cli -i src/styles/tailwind.css -o src/styles/tailwind.css
RUN sed -i 's/uri: \/hoge\/\*/uri: ""/g' src/styles/tailwind.css
RUN npm run build

Has anyone found a better solution?

[hironized]

Same issue here.
Sadly the previously mentioned workaround does not work in my case, since I am using tailwind as an postcss plugin.

I did find my own workaround, maybe this can be of use for others struggling with this while there is no real solution.
In my Dockerfile, I added the line RUN find node_modules -path '*/needle/test/files/*' -delete, after installing and before building.
With this, my Dockerfile looks something like this:

...
COPY package*.json ./
RUN npm ci

# temporary workaround to prevent parsing of unwanted files by tailwind
RUN find node_modules -path '*/needle/test/files/*' -delete

COPY . .

RUN npm run build
...

I believe this to be a bug in tailwind, but I didn't go code-diving to be certain of this.

What I found out about this issue:
This issue somehow occurs when tailwind starts to parse files out of the node_modules folder.
I'm guessing there might be many files that could trigger this outcome, for me it was (mainly) this file out of the needle package (which is a dependency for the less package).
Something goes wrong while parsing that file, and it somehow messes up the output file, creating the broken .\[uri\:\/hoge\/\*\] rule.
For me this was the only file creating (completely) invalid CSS, the other warnings you observed are caused by parsing other files out of the node_modules folder.

[k-schneider]

Just ran into this as well. @hironized your workaround worked for me. Thanks.

[douglasss]

Same problem here, for me the problem was in the same file @hironized mentioned and a few .md files in the node_modules