Django+TailwindCSSの初期設定決定版

DjangoにTailwindCSSを組み合わせた構成をよく使います。今までは、Django-TailwindというDjangoの3rd partyのパッケージを使っていたのですが、Asset Versioningを手動でやっていたりとちょっと不便なところがあったので、パッケージを使わずにDjango+TailwindCSSを構成する方法を検討してみました。

環境

Django 5.2
TailwindCSS 4.1.3
TailwindCSS CLI 4.1.3

設定手順

Djangoの基本設定

$ mkdir sample
$ cd sample
$ python3 -m venv venv
$ source venv/bin/activate
$ pip install django
$ django-admin startproject config .
$ python manage.py startapp sample
$ mkdir templates
$ mkdir -p static/src/css
$ mkdir static/css

動作確認のために、ごく簡単なDjangoのappも作っておきます。

config/settings.py(変更点のみ)

ALLOW_HOSTS = ["127.0.0.1"]

INSTALL_APPS = [
  ...
  "sample",
]

TEMPLATES = [
  {
    ...
    "DIRS": [BASE_DIR / templates],
    ...
  }
]

LANGUAGE_CODE = "ja"

TIME_ZONE = "Asia/Tokyo"

STATIC_URL = "static/"
STATICFILES_DIRS = [BASE_DIR / "static" / "src"]
STATIC_ROOT = f"/var/www/{BASE_DIR.name}/static"

sample/views.py

from django.shortcuts import render

def index(request):
    context = {"title": "Django-tailwindcss", "button_body": "click me !"}
    return render(request, "index.html", context)

templates/index.html

{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="{% static 'css/output.css' %}">
  <title>{{ title }}</title>
</head>

<body class="container mx-auto">
  <h1 class="text-3xl font-bold text-red-300 mb-4">{{ title }}</h1>
  <button class="bg-blue-500 text-white px-4 py-2 rounded">{{ button_body }}</button>
</body>

</html>

config/urls.py

from django.contrib import admin
from django.urls import path

from sample.views import index

urlpatterns = [
    path("", index, name="index"),
    path("admin/", admin.site.urls),
]

TailwindCSSの基本設定とローカルでの動作確認

TailwindCSS用のinput.cssを作成し、確認用Webサーバと、Tailwind CLIを動かします。

static/src/css/input.css

@import "tailwindcss";

$ python manage.py runserver &
$ npx @tailwindcss/cli -i ./static/src/css/input.css -o ./static/src/css/output.css --watch

http://127.0.0.1:8000/を開いて、こんなふうに見えれば、ここまでの設定は成功です。 localhostの見え方

tailwind.config.jsは作っていませんが、TailwindCSS4からデフォルトで配下のディレクトリのファイルを見てくれるようになったようです。詳しくは、こちら。

デプロイ

Asset Versioningを動かすために、デプロイするサーバ側でpython manage.py collectstatic --noinputというコマンドを実行する必要があります。

デプロイの方法によりますが、例えばこのページの方法のように、git pushでデプロイする場合、.gitignoreを以下のように構成します。

config/settings.py
db.sqlite3
node_modules
package-lock.json
package.json
venv
input.css

input.cssをサーバ側に持っていってしまうと、TailwindCSSの環境がないためにエラーになります。

そして、サーバ側のhooks/post-receiveを以下のように構成しました。

cd /var/www/sample
git --git-dir=.git pull
python3 manage.py collectstatic --noinput
touch /var/www/sample/config/wsgi.py

また、サーバ側のconfig/settings.pyの変更点は以下です。

DEBUG = False

ALLOWED_HOSTS = ["sample.example.com"]

STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage' # この追記大事！

Webサーバの設定は省略します。

以上で、Asset Versioningも含めてのDjango+TailwindCSSの設定ができました。今回はまだサンプルを試しただけなので、本番運用で他にノウハウがあるようであれば、随時追記していきたいと思います。