Tailwind CSSは、ユーティリティファーストのCSSフレームワークとして高い人気を誇ります。HTMLに直接クラスを適用し素早くスタイリングができる点が特徴です。この記事では、既存のDjangoプロジェクトにTailwind CSSを追加する方法について説明します。
この記事はTailwind CLI の公式インストールガイドを参考にしました
なぜDjangoプロジェクトでTailwind CSSを使いたいのか？
- 開発速度の向上 - インラインスタイリングですぐに結果が見える
- 一貫性のあるデザイン - 事前定義されたクラスによりデザインの統一性を保てる
- レスポンシブデザインの容易さ - モバイルファーストのアプローチで様々な画面サイズに対応
- カスタマイズ性 - プロジェクトに合わせて拡張やカスタマイズが可能
セットアップ手順
以下は、Djangoプロジェクトに Tailwind CSS を追加するステップバイステップのガイドです。
1. プロジェクト構造の準備
まず、Tailwind CSS用の専用アプリを作成します。これにより、静的ファイルを整理しやすくなり、Djangoのアプリケーション構造に合わせた管理が可能になります。
# tailwindcssディレクトリとその中の静的ファイル用ディレクトリを作成
mkdir -p tailwindcss/static/tailwindcss/css
2. Tailwind CSSの入力ファイルと出力ファイルを作成
/* tailwindcss/static/tailwindcss/css/input.css */
@import "tailwindcss";
出力用のCSSファイル output.css も同じディレクトリに作成されます（後でTailwindのCLIによって自動生成されます）。
3. settings.pyでアプリを登録
Djangoに新しいアプリを認識させるために、settings.pyファイルのINSTALLED_APPSに追加します。
INSTALLED_APPS = [
# 既存のアプリ
"django.contrib.admin",
"django.contrib.auth",
# ...
"your_app.apps.YourAppConfig",
# Tailwind CSSアプリを追加
"tailwindcss",
]
4. Tailwind CSS と CLI のインストール
次に、Tailwind CSSとCLIツールをインストールします。
# npmでTailwindとCLIをインストール
npm install tailwindcss @tailwindcss/cli
5. コンパイルスクリプトの作成
Tailwind CSSのソースファイルをコンパイルするためのスクリプトをcompile-tailwind.zshという名前で作成します。
# compile-tailwind.zsh
#!/bin/zsh
# Tailwind CSS compilation script
npx @tailwindcss/cli -i tailwindcss/static/tailwindcss/css/input.css -o tailwindcss/static/tailwindcss/css/output.css --watch
スクリプトに実行権限を付与します：
chmod +x compile-tailwind.zsh
6. テンプレートに出力CSSを含める
Tailwind CSSを使用したいテンプレートに、出力されたCSSファイルへのリンクを追加します。
{% load static %}
<!DOCTYPE html>
<html>
<head>
<!-- 既存のスタイルシート -->
<link rel="stylesheet" href="{% static 'your_app/css/styles.css' %}">
<!-- Tailwind CSSを追加 -->
<link rel="stylesheet" href="{% static 'tailwindcss/css/output.css' %}">
</head>
<body>
<!-- ここにコンテンツ -->
</body>
</html>
7. 開発サーバーの起動
2つのターミナルを使用して、DjangoサーバーとTailwindコンパイラを起動します。
# ターミナル1: Djangoサーバーを起動
python manage.py runserver
# ターミナル2: Tailwindコンパイラを起動（変更を監視）
./compile-tailwind.zsh
Tailwind CSSの使用例
Tailwind CSSが正しく設定されたら、HTMLテンプレートで直接クラスを使用できます。例えば：
<div class="container mx-auto p-4">
<h1 class="text-3xl font-bold text-blue-600">Hello, Tailwind in Django!</h1>
<p class="mt-2 text-gray-700">This is styled using Tailwind CSS.</p>
<button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
Click me
</button>
</div>
結論
Tailwind CSSをDjangoプロジェクトに統合することで、効率的で一貫性のあるスタイリングが可能になります。設定は少し手間がかかりますが、一度セットアップすれば、開発プロセスが大幅に改善され、メンテナンスも容易になって大満足です。
この方法はシンプルで、特別なDjangoパッケージなどに依存しないところが気に入っています。お試しあれ！