Docker＆React環境にTailwind CSSが読み込まれないときの対処法

TL;DR

DockerfileでconfigのCOPYを忘れていないですか？というお話。

環境

• ubuntu22.04
• react 18.2.0
• vite 4.3.0
• tailwindcss 3.3.1

対処法

Tailwind CSSの公式ドキュメント通りに進めていってもスタイルが適用されない場合は、Dockerfileに問題があるかも。

FROM node:19 as Dev

WORKDIR /usr/app

COPY package*.json /usr/app/
COPY tsconfig*.json /usr/app/
COPY vite.config.ts /usr/app/
COPY index.html /usr/app/

// これ忘れてない？
COPY tailwind.config.js /usr/app/
COPY postcss.config.js /usr/app/

RUN yarn install

EXPOSE 5173
CMD ["yarn", "dev"]

Dockerfileで個別にCOPYをしている場合は、configファイルの追加を忘れないようにしましょう。

おまけ