I'm developing a new Angular 19 application with Tailwind CSS 4. I've configured Tailwind according to the official Tailwind documentation, and everything works fine when running npm start and npm run build. However, I encounter errors when building the Docker image:
docker build -t tw-app .
[+] Building 34.4s (14/18) docker:desktop-linux
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 442B 0.0s
=> [internal] load metadata for docker.io/library/nginx:alpine 2.9s
=> [internal] load metadata for docker.io/library/node:22.13.1-alpine 1.9s
=> [auth] library/nginx:pull token for registry-1.docker.io 0.0s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 663B 0.0s
=> [build 1/6] FROM docker.io/library/node:22.13.1-alpine@sha256:e2b39f7b64281324929257d0f8004fb6cb4bf0fdfb9aa8cedb235a766aec31da 0.0s
=> [internal] load build context 0.0s
=> => transferring context: 3.90kB 0.0s
=> [stage-1 1/5] FROM docker.io/library/nginx:alpine@sha256:b471bb609adc83f73c2d95148cf1bd683408739a3c09c0afc666ea2af0037aef 0.0s
=> CACHED [build 2/6] WORKDIR /app 0.0s
=> [build 3/6] COPY package*.json ./ 0.0s
=> [build 4/6] RUN npm install 21.5s
=> [build 5/6] COPY . . 0.1s
=> ERROR [build 6/6] RUN npm run build 9.8s
------
> [build 6/6] RUN npm run build:
0.242
0.242 > [email protected] build
0.242 > ng build
0.242
0.803 ❯ Building...
9.629 ✔ Building...
9.631 Application bundle generation failed. [8.825 seconds]
9.631
9.631 ▲ [WARNING] Deprecation [plugin angular-sass]
9.631
9.631 src/styles.scss:1:8:
9.631 1 │ @import "tailwindcss";
9.631 ╵ ^
9.631
9.631
9.631 Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
9.631
9.631 More info and automated migrator:
9.631
9.631 The plugin "angular-sass" was triggered by this import
9.631
9.631 angular:styles/global:styles:1:8:
9.631 1 │ @import 'src/styles.scss';
9.631 ╵ ~~~~~~~~~~~~~~~~~
9.631
9.631
9.631 ▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
9.631
9.631 src/styles.scss:2217:11:
9.631 2217 │ https: //github/Brooooooklyn/nice/actions !important;
9.631 ╵ ~~
9.631
9.631
9.631 ▲ [WARNING] Expected "}" to go with "{" [css-syntax-error]
9.631
9.631 src/styles.scss:2653:1:
9.631 2653 │ }
9.631 │ ^
9.631 ╵ }
9.631
9.631 The unbalanced "{" is here:
9.631
9.631 src/styles.scss:2246:23:
9.631 2246 │ .\[uri\:\/hoge\/\*\] {
9.631 ╵ ^
9.631
9.631
9.635 ✘ [ERROR] Expected "*/" to terminate multi-line comment
9.635
9.635 src/styles.scss:2653:1:
9.635 2653 │ }
9.635 ╵ ^
9.635
9.635 The multi-line comment starts here:
9.635
9.635 src/styles.scss:2247:14:
9.635 2247 │ uri: /hoge/*;
9.635 ╵ ~~
9.635
9.635
------
Dockerfile:13
--------------------
11 | COPY . .
12 |
13 | >>> RUN npm run build
14 |
15 | FROM nginx:alpine
--------------------
ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1
View build details: docker-desktop://dashboard/build/desktop-linux/desktop-linux/z5qoskzcyemx4ucitqtytz5la
Here is my docker file:
ARG NODE_VERSION=22.13.1
FROM node:${NODE_VERSION}-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist/tw-4 /usr/share/nginx/html
COPY /scripts/robots.txt /usr/share/nginx/html/robots.txt
COPY /scripts/default.conf /etc/nginx/conf.d/default.conf
COPY /scripts/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
I'm developing a new Angular 19 application with Tailwind CSS 4. I've configured Tailwind according to the official Tailwind documentation, and everything works fine when running npm start and npm run build. However, I encounter errors when building the Docker image:
docker build -t tw-app .
[+] Building 34.4s (14/18) docker:desktop-linux
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 442B 0.0s
=> [internal] load metadata for docker.io/library/nginx:alpine 2.9s
=> [internal] load metadata for docker.io/library/node:22.13.1-alpine 1.9s
=> [auth] library/nginx:pull token for registry-1.docker.io 0.0s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 663B 0.0s
=> [build 1/6] FROM docker.io/library/node:22.13.1-alpine@sha256:e2b39f7b64281324929257d0f8004fb6cb4bf0fdfb9aa8cedb235a766aec31da 0.0s
=> [internal] load build context 0.0s
=> => transferring context: 3.90kB 0.0s
=> [stage-1 1/5] FROM docker.io/library/nginx:alpine@sha256:b471bb609adc83f73c2d95148cf1bd683408739a3c09c0afc666ea2af0037aef 0.0s
=> CACHED [build 2/6] WORKDIR /app 0.0s
=> [build 3/6] COPY package*.json ./ 0.0s
=> [build 4/6] RUN npm install 21.5s
=> [build 5/6] COPY . . 0.1s
=> ERROR [build 6/6] RUN npm run build 9.8s
------
> [build 6/6] RUN npm run build:
0.242
0.242 > [email protected] build
0.242 > ng build
0.242
0.803 ❯ Building...
9.629 ✔ Building...
9.631 Application bundle generation failed. [8.825 seconds]
9.631
9.631 ▲ [WARNING] Deprecation [plugin angular-sass]
9.631
9.631 src/styles.scss:1:8:
9.631 1 │ @import "tailwindcss";
9.631 ╵ ^
9.631
9.631
9.631 Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
9.631
9.631 More info and automated migrator: https://sass-lang.com/d/import
9.631
9.631 The plugin "angular-sass" was triggered by this import
9.631
9.631 angular:styles/global:styles:1:8:
9.631 1 │ @import 'src/styles.scss';
9.631 ╵ ~~~~~~~~~~~~~~~~~
9.631
9.631
9.631 ▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
9.631
9.631 src/styles.scss:2217:11:
9.631 2217 │ https: //github.com/Brooooooklyn/nice/actions !important;
9.631 ╵ ~~
9.631
9.631
9.631 ▲ [WARNING] Expected "}" to go with "{" [css-syntax-error]
9.631
9.631 src/styles.scss:2653:1:
9.631 2653 │ }
9.631 │ ^
9.631 ╵ }
9.631
9.631 The unbalanced "{" is here:
9.631
9.631 src/styles.scss:2246:23:
9.631 2246 │ .\[uri\:\/hoge\/\*\] {
9.631 ╵ ^
9.631
9.631
9.635 ✘ [ERROR] Expected "*/" to terminate multi-line comment
9.635
9.635 src/styles.scss:2653:1:
9.635 2653 │ }
9.635 ╵ ^
9.635
9.635 The multi-line comment starts here:
9.635
9.635 src/styles.scss:2247:14:
9.635 2247 │ uri: /hoge/*;
9.635 ╵ ~~
9.635
9.635
------
Dockerfile:13
--------------------
11 | COPY . .
12 |
13 | >>> RUN npm run build
14 |
15 | FROM nginx:alpine
--------------------
ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1
View build details: docker-desktop://dashboard/build/desktop-linux/desktop-linux/z5qoskzcyemx4ucitqtytz5la
Here is my docker file:
ARG NODE_VERSION=22.13.1
FROM node:${NODE_VERSION}-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist/tw-4 /usr/share/nginx/html
COPY /scripts/robots.txt /usr/share/nginx/html/robots.txt
COPY /scripts/default.conf /etc/nginx/conf.d/default.conf
COPY /scripts/nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
- Looks like your build process doesn't convert SASS into CSS. – Hans Kilian Commented 4 hours ago
1 Answer
Reset to default 0The key point is that starting from TailwindCSS v4, no preprocessor is needed anymore.
- How to install TailwindCSS on Angular 19 that uses SCSS? - StackOverflow
tailwindlabs/tailwindcss#15716 by RobinMalfait:
Migration tool doesn't recognize .scss files - GitHub
Simply put, TailwindCSS v4 removes the need for Sass and other preprocessors. The TailwindCSS v4 ecosystem can independently provide the functionality that these preprocessors offered.