Zenn
🎉

DjangoでTailwind CSSを利用する with Docker

2024/03/25に公開
django
Docker
Python
Tailwind CSS
tech

目的

DjangoでTailwind CSSを利用できるようにしたい．
django-tailwindというライブラリを利用すれば簡単にできそうだが，ライブラリを使わずにやりたかったため，今回は使用していない．

環境構築

今回はDocker環境内にDjangoを用意し、その中でTailwind CSSを設定する．
また，開発はVisual Studio Codeを利用し，リモートコンテナから開発を行う．

まずはDockerのコンテナを構築する．pythonのイメージにnode.jsをインストールする．

Dockerfile
# ベースイメージ
FROM python:3.12

# 作業ディレクトリの設定
WORKDIR /app

RUN apt-get update 
RUN apt-get install -y ca-certificates curl gnupg
RUN curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
RUN echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list
RUN apt-get update
RUN apt-get install nodejs -y

# ポートの公開
EXPOSE 8000

docker-compose.ymlも記述する．

docker-compose.yml
version: '3.8'

services:
  web:
    build: .
    volumes:
      - .:/app
    ports:
      - "8000:8000"
    tty: true
    stdin_open: true

コンテナをビルドし，コンテナ内にアクセスしてDjangoをインストールする．

pip3 install django==5.0.1

Djangoのプロジェクトを作成する

django-admin startproject mysite

ここまでするとディレクトリ構造は以下のようになっているはず．

│  docker-compose.yml
│  Dockerfile
│
└─mysite
    │  manage.py
    │
    └─mysite
            asgi.py
            settings.py
            urls.py
            wsgi.py
            __init__.py

Tailwind CSSをインストールし，設定する

次にTailwind CSSを設定していく．
新しくmysiteの中にnodeという名前(なんでもいい)でフォルダを作成する．
そのフォルダ内でTailwind CSSをインストールし，設定を行う．

npm init -y
npm install tailwindcss autoprefixer clean-css-cli
npx tailwindcss init -p

tailwind.config.jsを編集する．Djangoのテンプレートフォルダを指定し，ビルドできるようにする．

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    '../**/templates/*.html',
    '../**/templates/**/*.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

package.jsonを編集する．
※Docker for Windowsの場合ファイルの更新がうまく取れないので--watchではなく--pollを利用する．

package.json
  "scripts": {
    "watch": "tailwind -i ../static/css/tailwind.css -o ../static/css/style.css --watch --poll",
    "build": "tailwind -i ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css",
  },

mysite/static/css/tailwind.css を作成し，以下のように編集する

tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

いったんビルドしてstyle.cssが生成されるか確認

npm run build

Djangoの設定

適当なビューとテンプレートを作成する．
テンプレートは以下のようにstaticを利用し，ビルドされたものが使われるようにする．

{% load static %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
    <title>sample</title>
  </head>
  <body>
    <div class="text-center m-5">
      <div class="bg-yellow-400 p-5 inline-block rounded">
        <div class="text-3xl font-bold">でかい文字</div>
      </div>
    </div>
  </body>
</html>

runserverでDjangoを起動する．

python manage.py runserver 0.0.0.0:8000

http://localhost:8000にアクセスし，反映されているか確認する．

開発時にはnpm run watchでファイル更新でビルドがされるようにし，デプロイ時にはnpm run buildでビルドをしよう．

Discussion