Open2

Dockerで久々にTailwind v3を使うとCSSが空になる間違いについて

Docker
Tailwind CSS
uruositeuruosite

TL;DR

Tailwind v4の自動HTML検出に慣れた後、久々にv3のDockerfileをいじると、コピーではまります。

https://tailwindcss.com/blog/tailwindcss-v4#automatic-content-detection

例えば、以下のDockerfileは、一見正しくビルドできますが、CSSが以下のように空になり(というかビルドできてない)、使えません。

@tailwind base;@tailwind components;@tailwind utilities;

間違いを探そう

Tailwind v3を使っています。以下を参考にNode+PHPのマルチステージビルドをしています。

https://gist.github.com/tonysm/8a4bed9a1f0ea25111d4aabb0c07bef5

# プロダクション用のDockerfile
# https://world.hey.com/tonysm/deploying-laravel-apps-with-kamal-2-0-6143d288
ARG NODE_VERSION=22
FROM node:${NODE_VERSION}-alpine AS node
# ====================================================================
FROM ghcr.io/serversideup/php:8.2-fpm-nginx-alpine AS base

# Laravelのキャッシュ系コマンドを自動で発火する
# https://serversideup.net/open-source/docker-php/docs/reference/environment-variable-specification
ENV AUTORUN_ENABLED=true

ENV PHP_OPCACHE_ENABLE=1

USER root

RUN apk add --update busybox-suid && \
    install-php-extensions bcmath gd exif intl

COPY --from=composer /usr/bin/composer /usr/bin/composer

USER www-data

# ====================================================================
FROM base AS dependencies

WORKDIR /var/www/html/

COPY composer.json composer.lock /var/www/html/

RUN mkdir -p app && \
    mkdir -p database/{factories,seeders} && \
    composer install --no-interaction --prefer-dist --no-scripts

# ====================================================================
FROM node AS assets

WORKDIR /var/www/html/

USER root

COPY ./package.json ./package-lock.json ./vite.config.js /var/www/html/
COPY ./public/ /var/www/html/public
COPY ./resources/ /var/www/html/resources

RUN npm ci && npm run build

# ====================================================================
FROM base
# ソースコード
COPY --chown=www-data:www-data . /var/www/html
# vendor
COPY --from=dependencies --chown=www-data:www-data /var/www/html/vendor /var/www/html/vendor
# ビルドアーティファクト (config/deploy.ymlのasset_pathに指定する)
COPY --from=assets --chown=www-data:www-data /var/www/html/public/build /var/www/html/public/build

RUN composer install --no-interaction --prefer-dist --optimize-autoloader

USER root

RUN rm -rf /usr/bin/composer

USER www-data
uruositeuruosite

何が間違っているのか

COPY ./package.json ./package-lock.json ./vite.config.js /var/www/html/
COPY ./public/ /var/www/html/public
COPY ./resources/ /var/www/html/resources

RUN npm ci && npm run build

ここです。

Tailwind v3なので、HTMLをマウントしただけではclassが伝わりません。

つまり、tailwind.config.jsとpostcss.config.jsもコピーしてくる必要があります。

COPY ./package.json ./package-lock.json ./vite.config.js /var/www/html/
+ COPY ./tailwind.config.js ./postcss.config.js /var/www/html/
COPY ./public/ /var/www/html/public
COPY ./resources/ /var/www/html/resources