[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

[philipp-spiess]

Hey folks! Sorry for the long wait here but I finally got the chance to look into the repo.

The way automatic content discovery works is described in our docs here: https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned. The reason why the Docker build contains some utilities that the local development build does not have is that inside the container, not .gitignore file is added and hence we look through all folders for possible class names. This includes build artifacts from Angular itself and node_modules/ which is not only making it slower but also can lead to erroneous class names being picked up (especially possible with arbitrary values unfortunately).

Thankfully, I was able to fix the repro in one line by ensuring the .gitignore file is present inside the container so that Tailwind can read it:

diff --git a/projects/webapp/Dockerfile b/projects/webapp/Dockerfile
index 48c4f8d..9bdda92 100644
--- a/projects/webapp/Dockerfile
+++ b/projects/webapp/Dockerfile
@@ -12,6 +12,7 @@ COPY webclient/.postcssrc.json ./
 COPY webclient/angular.json .
 COPY webclient/tsconfig.json .
 COPY webclient/projects/webapp ./projects/webapp
+COPY webclient/.gitignore .
 
 CMD if [ "${ENVIRONMENT}" = "development" ]; then npm run start:webapp; else ng build; fi

(Note I actually had to change the file and not include the webclient/ prefix but nevertheless the fix is the same.

[gerhardsletten]

Had the same issue with deployment to vercel, so adding .gitignore [to the allow-lists] (https://vercel.com/docs/deployments/vercel-ignore#allowlist) fixed the issue

!.gitignore

[Martinspire]

Hey folks! Sorry for the long wait here but I finally got the chance to look into the repo.

The way automatic content discovery works is described in our docs here: tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned. The reason why the Docker build contains some utilities that the local development build does not have is that inside the container, not .gitignore file is added and hence we look through all folders for possible class names. This includes build artifacts from Angular itself and node_modules/ which is not only making it slower but also can lead to erroneous class names being picked up (especially possible with arbitrary values unfortunately).

Thankfully, I was able to fix the repro in one line by ensuring the .gitignore file is present inside the container so that Tailwind can read it:

diff --git a/projects/webapp/Dockerfile b/projects/webapp/Dockerfile
index 48c4f8d..9bdda92 100644
--- a/projects/webapp/Dockerfile
+++ b/projects/webapp/Dockerfile
@@ -12,6 +12,7 @@ COPY webclient/.postcssrc.json ./
COPY webclient/angular.json .
COPY webclient/tsconfig.json .
COPY webclient/projects/webapp ./projects/webapp
+COPY webclient/.gitignore .

CMD if [ "${ENVIRONMENT}" = "development" ]; then npm run start:webapp; else ng build; fi
(Note I actually had to change the file and not include the webclient/ prefix but nevertheless the fix is the same.

Well, I'm using COPY . . so that should include the .gitignore file, but it is still doing something wrong.

The error after the fix from earlier now results into:

> ng build --configuration k8s
> 
❯ Building...
✖ Building... [FAILED: <css input>:1:127239: Unknown word length]
An unhandled exception occurred: <css input>:1:127239: Unknown word length

I'm also not really sure what to do with the sources. Should I just include my own css files, or will it need primeng and other plugins/dependencies as well? Or should i not include my own css files? Its all a bit vague and I don't really understand why the pipeline works different than what I do locally