Cannot build docker image (Angular 19) and Tailwind 4

Question

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

Answer 1

I don't know if this is the correct answer but when I comment out the **/.gitignore line in the .dockerignore file, I can build the docker image.

My .dockerignore file:

**/.classpath
**/.dockerignore
**/.env
**/.git
# **/.gitignore
**/.project
**/.settings
**/.toolstarget
**/.vs
**/.vscode
**/.next
**/.cache
**/*.*proj.user
**/*.dbmdl
**/*.jfm
**/charts
**/docker-compose*
**/compose*
**/Dockerfile*
**/node_modules
**/npm-debug.log
**/obj
**/secrets.dev.yaml
**/values.dev.yaml
**/build
**/dist
LICENSE
README.md
**/.angular

Answer 2

During search I stumbled accross a hint that pointed me to this page in the Tailwind docs: https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources

With the addition of "source" after the import statement you can explicitly specify the base loaction from which Tailwind scans for classes.

@import "tailwindcss" source("../src");

This fixed the error in my case. We run our docker commands from another folder that contains all deployment-related yamls. This probably messed up the path locations for Tailwind, similar to the mono-repo scenario that the linked documenation mentions as an example.