Djangoから手軽にTailwindCSSをセットアップできるdjango-tailwindを試す

Django TailwindCSS

CSSフレームワークである TailwindCSS は、通常NodeJSを使ってCSSをビルドします。

Djangoから利用する場合、TailwindCSSのビルド環境を整備した上で、ビルドされたCSSをDjangoで読み込むように実装が必要になります。

django-tailwindを使うと、このセットアップとDjangoへの組み込みを手軽に実施できます。

django-tailwind.readthedocs.io

以下、 django-admin startproject myproject で作成したmyprojectでdjango-tailwindを試します。

インストールと設定

django-tailwindは内部で npm コマンドを実行するため、あらかじめ NodeJS をインストールしておく必要があります。

pipでdjango-tailwindをインストールします。

pip install django-tailwind

tailwind アプリをsettings.pyの INSTALLED_APPS に追加します。

INSTALLED_APPS = [
    # ...
    'tailwind',
]

これで manage.py tailwind コマンドや、django-tailwindが提供するテンプレートタグが有効になりました。

次にTailwindCSSのファイル群を格納するテーマアプリを作成します。 manage.py tailwind init を実行すると、cookiecutterがインストールされて、cookiecutterでテーマアプリが作られます。

python manage.py tailwind init

アプリ名はデフォルトのままだと theme という名前になります。

作成した theme アプリも INSTALLED_APPS に追加します。

INSTALLED_APPS = [
    # ...
    'tailwind',
    'theme',  # 追加
]

settings.pyに TAILWIND_APP_NAME の設定を追記します。値は作成したテーマのアプリ名です。

TAILWIND_APP_NAME = 'theme'

settings.pyに INTERNAL_IPS の設定を追加します。今回は開発用なので、localhostのアドレスだけを設定します。

INTERNAL_IPS = [
    '127.0.0.1',
]

TailwindCSSの依存関係をインストールします。

python manage.py tailwind install

上記のコマンドは、内部で npm install を実行します。

これでインストールと利用設定は完了です。

テンプレートを作成して利用する

デフォルトでは theme/templates/base.html が作成されていますが、これは編集可能です。またパスがtemplates直下であることに気をつけておいたほうがよさそうです。他のアプリのために base.html を用意している場合、衝突する可能性があります。

theme/templates/base.html:

{% load static tailwind_tags %}
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>{% block title %}{% endblock %}</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {% tailwind_css %}
  </head>

  <body class="bg-gray-50 font-serif leading-normal tracking-normal">
    <div class="container mx-auto">
      <section class="p-4">
        <h1 class="text-5xl">{% block h1 %}{% endblock %}</h1>
      </section>

      {% block main %}{% endblock %}
    </div>
  </body>
</html>

この base.html を利用するページを作ってみます。

myappというアプリを作成します。

python manage.py startapp myapp

INSTALLED_APPS にも追加しておきます。

INSTALLED_APPS = [
    # ...
    'tailwind',
    'theme',
    'myapp', # 追加
]

templatesディレクトリを作成しindex.htmlファイルを作成します。

myapp/templates/index.html:

{% extends "base.html" %}

{% block title %}Django Tailwind{% endblock %}

{% block h1 %}Django + Tailwind{% endblock %}

{% block main %}
<div class="max-w-sm rounded overflow-hidden shadow-lg border mb-2">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">カードタイトル</div>
    <p class="text-gray-700 text-base">カード本文</p>
  </div>
  <div class="px-6 pt-2 pb-2">
    <a href="http://example.com/" class="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-blue-700 mr-2 mb-2">Read more</a>
  </div>
</div>
{% endblock %}

index.html を利用するビューを用意します。

myapp/views.py:

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

ビューをプロジェクトのurls.pyに登録します。

myproject/urls.py:

from django.urls import path
from myapp.views import index

urlpatterns = [
    path('', index),
]

ここまでできたら動作確認をします。

tailwindの開発用のビルドは、 manage.py tailwind start を実行すると、django-tailwindがnpmコマンドを実行してくれます。

python manage.py tailwind start

tailwindのビルドを起動した状態で、Djangoのrunserverも起動し、ブラウザで確認してみます。

python manager.py runserver

TailwindCSSが適用されたページを表示できました。

django-tailwindを使うと、TailwindCSSをDjangoに気軽に組み込めるのがうれしいですね。