Tailwind and Nuxt: Docker build hangs at `transforming` step

[cx-networks-gmbh]

What version of Tailwind CSS are you using?

    "@tailwindcss/vite": "^4.1.8",
    "nuxt": "^3.17.4",
    "tailwindcss": "^4.1.8",

What build tool (or framework if it abstracts the build tool) are you using?
Nuxt https://nuxt.com/

What version of Node.js are you using?

node --version
v20.11.0

What browser are you using?
Not applicable

What operating system are you using?
Windows 11 as a host OS and then docker desktop.

Microsoft Windows 11 Home
Version	10.0.26100 Build 26100

docker --version
Docker version 25.0.3, build **4debf41**

Reproduction URL
https://github.com/cx-networks-gmbh/tailwind-nuxt-docker-build-issue

Describe your issue
I am using a plain nuxt project created with the normal starter guide on https://nuxt.com/docs/getting-started/installation.

So just plain npm create nuxt tailwind-nuxt-docker-build-issue.

Then I want to use tailwind so I am following this guide as nuxt uses vite: https://tailwindcss.com/docs/installation/using-vite

If I run the npm run dev command, every thing works fine. If I run the npm run generate command, everything works fine.

Now I want to deploy it to a normal docker host, so building a container with this dockerfile (full dockerfile is in the repo above):

FROM node:20.11.0-alpine AS build
COPY package.json ./
COPY package-lock.json ./

RUN npm ci
COPY . .
RUN npm run generate

FROM nginx:alpine-slim AS nginx
// NGINX CONFIG NOW

Logs

docker build --progress plain -t tailwindtest .
2025/06/02 07:50:49 http2: server: error reading preface from client //./pipe/docker_engine: file has already been closed
#0 building with "default" instance using docker driver

#1 [internal] load build definition from Dockerfile
#1 transferring dockerfile: 393B done
#1 DONE 0.0s

#2 [internal] load metadata for docker.io/library/nginx:alpine-slim
#2 DONE 0.5s

#3 [internal] load metadata for docker.io/library/node:20.11.0-alpine
#3 DONE 0.5s

#4 [internal] load .dockerignore
#4 transferring context: 97B done
#4 DONE 0.0s

#5 [build 1/6] FROM docker.io/library/node:20.11.0-alpine@sha256:2f46fd49c767554c089a5eb219115313b72748d8f62f5eccb58ef52bc36db4ad
#5 DONE 0.0s

#6 [nginx 1/5] FROM docker.io/library/nginx:alpine-slim@sha256:b947b2630c97622793113555e13332eec85bdc7a0ac6ab697159af78942bb856
#6 DONE 0.0s

#7 [internal] load build context
#7 transferring context: 4.39kB 0.0s done
#7 DONE 0.0s

#8 [build 3/6] COPY package-lock.json ./
#8 CACHED

#9 [build 2/6] COPY package.json ./
#9 CACHED

#10 [build 4/6] RUN npm ci
#10 CACHED

#11 [build 5/6] COPY . .
#11 DONE 0.1s

#12 [build 6/6] RUN npm run generate
#12 0.792
#12 0.792 > generate
#12 0.792 > nuxt generate
#12 0.792
#12 1.217 [nuxi] Nuxt 3.17.4 with Nitro 2.11.12
#12 2.930 [nuxi] ℹ Building for Nitro preset: static
#12 3.962 ℹ Building client...
#12 3.975 ℹ vite v6.3.5 building for production...
#12 4.033 ℹ transforming...

If running the docker build with docker build -t tailwindtest . the build process keeps staying at the transforming... stage for ever. Even when running overnight for 8 hours, the step is not completing.

I am expecting a build time of around 1 minute.

Open Issues that I found but did not resolve the issue

• [Bug][4.0.10 - 4.0.12] Very Slow Vercel CLI builds (30mins+) with Nuxt/Vite project using Tailwind >= 4.0.10 #17092
• Tailwindcss 4.1.7 is too slow #18101
• @tailwindcss/vite 4.1.7 slows down Vite builds significantly in Jenkins #18148

[wongjn]

Try removing .gitignore from .dockerignore, (assuming this change means the gitignore gets copied into Docker).

[dimitri-koenig]

I found a working solution/workaround for production builds:

• Deactivate automatic source detection via @import "tailwindcss" source(none);
• Define your sources manually via @source '../views';

Another solution is to downgrade tailwind and any other tailwind packages to 4.0.17.

The solution for dev & hot reload was to extend the watch config with another ignore path.

[cx-networks-gmbh]

Try removing .gitignore from .dockerignore, (assuming this change means the gitignore gets copied into Docker).

Already tried this. Sadly same result

[cx-networks-gmbh]

I found a working solution/workaround for production builds:

* Deactivate automatic source detection via `@import "tailwindcss" source(none);`

* Define your sources manually via `@source '../views';`

Another solution is to downgrade tailwind and any other tailwind packages to 4.0.17.

I'm still searching for a solution for hot reloading via vite.

That did not work either. Downgrading is of course an option but I had to go to 4.0.8 to make it work.

[thecrypticace]

Your build container copies everything to the root directory treating / as your project folder:

Because of this when we perform automatic content detection we're doing it at / and this ends up taking a long time, often ending up in loops. You should instead copy your project to a directory instead of the root and the build time issue will go away:

FROM node:20.11.0-alpine AS build
COPY package.json ./
COPY package-lock.json ./

RUN npm ci

# Copy and build in `app` instead of `/`
COPY . app
RUN cd app && npm run generate

FROM nginx:alpine-slim AS nginx

COPY nginx/nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /usr/share/nginx/html/*

# Copy from `/app/dist` instead of `/dist`
COPY --from=build /app/dist /usr/share/nginx/html

COPY ./nginx/app.conf /etc/nginx/sites-enabled/app.conf

[cx-networks-gmbh]

Awesome, thank you!

[vnadhan]

Your build container copies everything to the root directory treating / as your project folder:

Because of this when we perform automatic content detection we're doing it at `/` and this ends up taking a long time, often ending up in loops. You should instead copy your project to a directory instead of the root and the build time issue will go away:

FROM node:20.11.0-alpine AS build
COPY package.json ./
COPY package-lock.json ./

RUN npm ci

Copy and build in app instead of /

COPY . app
RUN cd app && npm run generate

FROM nginx:alpine-slim AS nginx

COPY nginx/nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /usr/share/nginx/html/*

Copy from /app/dist instead of /dist

COPY --from=build /app/dist /usr/share/nginx/html

COPY ./nginx/app.conf /etc/nginx/sites-enabled/app.conf

This is an amazing answer, just perfect!