Zenn
🐍

【Python】DjangoでTailwindcssを導入しレイアウトをオシャレにする方法

2024/11/25に公開
django
Tailwind CSS
pyhton
staticfiles
tech

達成目標

・DjangoにTailwindcssを導入することができ、レイアウトの調整が可能となる。

旧ログイン画面

新ログイン画面

１．Dockerfileの編集

Dockerfile
FROM python:3.11-slim

# システムの依存関係をインストール
RUN apt-get update && apt-get install -y \
  gcc \
  postgresql-client \
  curl \
  && rm -rf /var/lib/apt/lists/*

# Node.jsとnpmをインストール（Tailwind CSSの依存関係をインストールするために必要）
RUN curl -sL https://deb.nodesource.com/setup_18.x | bash - \
  && apt-get install -y nodejs \
  && rm -rf /var/lib/apt/lists/*

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

# Pythonの依存関係をインストール
COPY requirements.txt . 
RUN pip install --no-cache-dir -r requirements.txt

# プロジェクトファイルをコピー
COPY . .

# Tailwind CSSの依存関係をインストール
RUN npm install -D tailwindcss postcss autoprefixer

# Tailwindの設定ファイルを作成
RUN npx tailwindcss init

# 8000番ポートを解放
EXPOSE 8000

# Django開発サーバーを起動
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
Dockerfileの解説
PostCSSやAutoprefixerをインストールする理由
Dockerfile
RUN npm install -D tailwindcss postcss autoprefixer
  • PostCSS:
    CSSを加工するツールで、Tailwind CSSを使うために必要。
  • Autoprefixer:
    CSSのベンダープレフィックス（ブラウザ互換性を確保するための自動付与）を追加するためのツール。
npmとは

npm (Node Package Manager):

  • Node.jsのパッケージマネージャーで、ライブラリやツールの管理を行う。
  • これを使って、プロジェクトに必要なパッケージをインストール・管理する。
Tailwind CSSの設定ファイルの生成
Dockerfile
RUN npx tailwindcss init
  • Tailwind CSSの設定ファイル（tailwind.config.js）を生成するためのコマンド。
ビルドプロセスの流れ

Tailwind CSSを使う場合、以下の手順でビルドされる。

依存関係のインストール
npm install -D tailwindcss postcss autoprefixer
Tailwind CSSファイルの作成と設定
npx tailwindcss init
コマンドを実行し、CSSをビルド
npx tailwindcss build

２．requirements.txt の作成と追加

requirements.txt の作成と追加
django-tailwind
requirements.txt に記載されているパッケージをインストールする
docker-compose exec web pip install -r requirements.txt
パッケージが変更された場合、インストールされている依存関係を requirements.txt に保存する
docker-compose exec web pip freeze > requirements.txt

３．コンテナの停止と再起動

コンテナの停止と再ビルド
docker-compose down
docker-compose up --build

４．Tailwindcssの設定ファイルの作成と編集

ファイルを生成
docker-compose exec web npx tailwindcss init
ファイルへ以下を追加
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./templates/**/*.html",  // どのファイルを対象にするか指定
    "./app/**/*.{js,ts,jsx,tsx}", // JavaScript/TypeScript ファイルがある場合
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

５．settings.pyの編集

settings.pyに以下の追加を行い静的ファイルの設定を行う
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",　# プロジェクト内の静的ファイルディレクトリ
]

STATIC_ROOT = BASE_DIR / "staticfiles"　# 静的ファイルを集める場所（本番環境用）

６．styles.cssファイルを作成と編集

プロジェクトフォルダ配下にフォルダとファイルを作成
mkdir -p static/css
cssフォルダ配下にファイルを作成
New-Item static/css/styles.css
static/css/styles.css内に以下を追加
/* Tailwindの基本スタイルを読み込む */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 追加のカスタムスタイル */
@layer components {
  /* カスタムコンポーネントスタイルをここに追加 */
}
以下を実行するとTailwind CSS がコンパイルされ、静的ファイルとして使用できるようになる
docker-compose exec web npx tailwindcss -o static/css/styles.css --watch
Djangoの静的ファイルを収集し、プロジェクトの設定で指定されたディレクトリにまとめられる
docker-compose exec web python manage.py collectstatic
出力結果
プロジェクトフォルダ配下にstaticfilesフォルダが作成される
121 static files copied to '/app/staticfiles'.
docker-compose exec web python manage.py collectstaticの意味

・プロジェクト内の静的ファイル（CSS、JavaScript、画像など）は通常、アプリごとに分散しているが、docker-compose exec web python manage.py collectstaticを実行することで、ファイルを一箇所（STATIC_ROOT）に収集することができる。
・collectstaticコマンドは、アプリケーション内やSTATICFILES_DIRSで指定された場所から静的ファイルを収集し、STATIC_ROOTで指定されたディレクトリに集めま
・collectstaticは静的ファイルを本番環境用に整理して準備するためのコマンド。

生成されたフォルダの意味

admin
Django の管理画面に必要な静的ファイル（CSS、JavaScript、画像など）が格納されています。Djangoがデフォルトで提供する管理画面のための静的ファイルを含みます。

css
あなたが作成したstyles.cssなど、プロジェクト内で定義したCSSファイルがここに収集されています。

django_extensions
django_extensionsに関連する静的ファイルが含まれています。特定の機能に必要なリソースがあれば、ここに保存されます。

７．テンプレートフォルダの作成（任意）

以下の記事のテンプレートを用いて行う。
https://zenn.dev/code_journey_ys/articles/dc737734987c95

ここからは、テンプレートファイルがある方はそちらをChatGPTに投げて、Tailwindcssのレイアウトに変換してもらって下さい。

８．画面の確認


Discussion