【Django5×Tailwind4】DjangoプロジェクトにTailwind4を導入する方法
karrinn
著者概要
今回はDjangoプロジェクトにTailwind(v4)を導入する手順を紹介します。簡潔かつもれなく、サンプルコードのリポジトリも載せますので同じことをやろうとしている方は参考にしてください。
大事なこと
tailwindは最近v3からv4にバージョンがあがり、いろんな部分が簡素化、高速化等が行われました。tailwind3の頃は必要だったtailwind.config.jsなんかはいらなくなりました。
編集、追加するファイルのうち重要なもの
適当なDjangoプロジェクトを立ち上げてセットアップするので、ファイルはそこそこ増えますが、tailwindのセットアップに必要なファイル、Djangoプロジェクトのセットアップ上増えたファイルがありますので、以下にtailwindのセットアップのために作成するファイル等を記載します
| ファイル名 | 役割 |
|---|---|
| npmパッケージ管理 |
| uvでpythonパッケージ管理するので存在します。 |
| viteでtailwindをセットアップします。 |
| このcssでnpmパッケージのtailwindをインポートします |
|
|
| ビルドコマンドを実行するとここにビルド結果のcssが吐き出されます。 |
使用ツール
使用ツールは以下の通りです。PCにインストールしていない場合はインストールしてください
| ツール | バージョン | 用途 |
|---|---|---|
uv | 0.8 | pythonのバージョン、パッケージ管理をします。 |
npm | 10.9.3 | 本題のviteとtailwindを入れるために必要です |
下準備
リポジトリをセットアップする
以下のコマンドでpythonプロジェクトの初期化、ライブラリのインストールを行います。
uv init
uv add django==5.2
npm install vite@^7.1.7 @tailwindcss/vite@^4.1.13djangoプロジェクトの作成
サンプルコードを配置するdjangoプロジェクトを用意します。
既存のプロジェクトに導入する場合は読み飛ばして結構ですが、djangoプロジェクトの構造は現場、個人でそれぞれ違いますので今回はこんな感じの構造ですよ、という紹介のために書きます。
uv run django-admin startproject django_tailwind_proj .Djangoアプリ作成
プロジェクト同様です
uv run manage.py startapp sampleappsettings.pyのINSTALLED_APPSにアプリ追加
Djangoお決まりのやつです。
INSTALLED_APPS = [
"sampleapp", # 追加
'django.contrib.admin',
...
]プロジェクトディレクトリ配下のurls修正
これもお決まりのパターンです。
from django.contrib import admin
from django.urls import path, include # includeを追加
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('sampleapp.urls')), # 追加
]アプリディレクトリにurlsを作成してviews.pyにルーティング
from django.urls import path
from . import views
urlpatterns = [
path("", views.IndexView.as_view(), name="index")
]views.pyにクラス作成
TemplateViewを継承してテンプレートへルーティングします
from django.shortcuts import render
from django.views.generic import TemplateView
class IndexView(TemplateView):
template_name = "sampleapp/index.html"テンプレートを置いておく
index.htmlを置いておきます。後でこれにtailwindを適用します。
{# 空でいいよ #}本題：tailwindのセットアップ
ここからが本題です。
vite.config.jsを作成
vite.config.jsを作成し、ビルド対象になるモジュール、ビルド結果の出力先などを定義します。Djangoのstaticディレクトリ内のいい感じの場所を指定しましょう。
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [tailwindcss()],
build: {
// ビルド結果の出力先を Django の static 配下に変更
outDir: "sampleapp/static/sampleapp/dist", // 👈 Adjust as needed
rollupOptions: {
// ビルド対象のエントリポイントを書く
input: {
vendor: "sampleapp/static/sampleapp/js/vendor.js",
},
output: {
// 既存 main 名称を維持しつつ他エントリも [name] で出力
entryFileNames: "[name].min.js",
// CSS / 画像 など資産も名前衝突しないよう [name] を含める
assetFileNames: "[name].min.[ext]",
},
},
},
});tailwindをインポートするcssを作成する
cssを作成します。tailwindをインポートするだけにしておきます。
@import "tailwindcss";cssをインポートするJSを作成する
ビルド対象に指定した位置にJSを作成します。先ほどのCSSを読み込むだけにします。
import "../css/vendor.css";npmコマンドを用意する
おまけですが、tailwindはclassを自動読み込みして必要なものだけビルド時に構成してくれるので、開発中はwatchさせといた方がいいです。
今回はbuild,watchの二つ用意しておきます。
{
"name": "django-tailwind",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"build": "vite build",
"watch": "vite build --watch"
},
"dependencies": {
"vite": "^7.1.7"
},
"devDependencies": {
"@tailwindcss/vite": "^4.1.13"
}
}ビルド
作成したビルドコマンドでビルドします。
npm run buildsampleapp/static/sampleapp/dist/vendor.min.css
sampleapp/static/sampleapp/dist/vendor.min.js
この２ファイルが吐き出されればOKです。
テンプレートでビルド結果ファイルを読み込んで動作確認
空っぽにしておいたindex.htmlで適当なtailwindクラスを使ってみて、ちゃんと使えるか確認します。watchしておくのを忘れずに！
npm run watch{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="{% static 'sampleapp/favicon.ico' %}">
<title>Django Tailwind Example</title>
{# ビルド後のtailwind CSSを読み込む #}
<link href="{% static 'sampleapp/dist/vendor.min.css' %}" rel="stylesheet">
</head>
<body>
<div class="container mx-auto">
<div class="bg-blue-500 text-white p-4 rounded">
<h2 class="text-2xl font-bold mb-2">Hello, Tailwind CSS!</h2>
<p class="mb-4">DjangoにTailwind CSSを導入したよん。</p>
</div>
</div>
{# JSも使う場合 #}
<script src="{% static 'sampleapp/dist/vendor.min.js' %}"></script>
</body>
</html>開発サーバで確認
開発サーバを立ち上げて確認してみましょう。
uv run manage.py runserver
青背景、containerなどのtailwindクラスが適用されていればセットアップ完了していることがわかります。
まとめ
最近はこういう作業はclaude codeかcodexにやらせることがほとんどですが、tailwindはまだデータが少ないのか、v3とv4の内容が混ざっていたりまともにセットアップしてくれないので自力でやっています。（めんどい）
駆け出しの頃は私はいわゆる個人謎備忘録ブログ様たちに大変助けられていました。いつか恩返しを、、と思っていましたが、もうそういう時代なので、なかなか書く価値のあることって少なくなってしまいましたが、これならまだギリギリ一瞬は役に立つかもしれないと思って書いてみました。
「AI君これ読んで覚えてくれな！」という気持ちもあります笑
またこういう「AIく〜ん」って思うことがあったら書こうと思います。
今回紹介したサンプルコードのリポジトリはこちらです。
このページのソースをAI君に食わせれば流石にちゃんとやってくれると思うのでよかったらそうしてやってください。
まだコメントはありません。最初のコメントを残しませんか？