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が適用されたページを表示できました。
