DjangoでTailwind環境を構築するのに少し手間取ったので記します。
【参考にしたサイト①】【参考にしたサイト②】
①Node.js（npm）をインストール
【コマンド】
node -v #バージョンが表示されればok
npm -v #バージョンが表示されればok
②django-tailwindをインストール
【コマンド】pip install django-tailwind③Django settings.pyの内容を追加・変更１
②でインストールしたプログラムをsettings.pyに登録する。# settings.py
INSTALLED_APPS = [
...
'tailwind',
]
python manage.py tailwind init
※実行途中、Tailwind用アプリ名を聞かれますが、特に理由がなければデフォルト（theme）にし、無記入のままEnterで進める。
デフォルトの theme というTailwind用のフォルダがDjangoプロジェクトフォルダ下に作成されます。
INSTALLED_APPS = [
...
'tailwind',
]
④tailwind initを実行
【コマンド】python manage.py tailwind init
※実行途中、Tailwind用アプリ名を聞かれますが、特に理由がなければデフォルト（theme）にし、無記入のままEnterで進める。
デフォルトの theme というTailwind用のフォルダがDjangoプロジェクトフォルダ下に作成されます。
⑤Django settings.pyの内容を追加・変更２
④でインストールされたTailwind用アプリをsettings.pyのINSTALLED_APPSに登録する。INSTALLED_APPS = [ # ...
"tailwind",
"theme", # 追加
'django_browser_reload', #追加 開発中に自動リロード,
]
INTERNAL_IPSを追加。
INTERNAL_IPS = [ "127.0.0.1", ]
TAILWIND_APP_NAMEを追加。
TAILWIND_APP_NAME = 'theme'
⑥python manage.py tailwind install を実行
参考サイトの手順で実行すると以下のエラーが発生した。（ここで少しハマった）
CommandError:
It looks like node.js and/or npm is not installed or cannot be found.
Visit https://nodejs.org to download and install node.js for your system.
If you have npm installed and still getting this error message, set NPM_BIN_PATH variable in settings.py to match path of NPM executable in your system.
Example:
NPM_BIN_PATH = "/usr/local/bin/npm"
どうも調べたところ、npmのPATHが見つからない との事。
【参考にしたサイト③】
動作環境上でnpmの実行先を調べ、settings.pyにNPM_BIN_PATHの追加。
以下コマンドでnpmの実行ファイルの格納先を確認する。
・Windows power shell の場合
【コマンド】
Get-Command npm
・Linux の場合
【コマンド】
which npm
・windows実行結果例
CommandType Name Version Source
----------- ---- ------- ------
ExternalScript npm.ps1 C:\Program Files\nodejs\npm.ps1
・Windowsで設定した例
NPM_BIN_PATH = r"C:\Program Files\nodejs\npm.cmd"
NPM_BIN_PATHを追加後、再度 python manage.py tailwind install コマンドを実行する。
⑦theme内のtemplatesフォルダ内base.html を整備
以下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に以下の記述でTailWindCSSが使用可能となる。
{% load static tailwind_tags %}
<head> {% tailwind_css %} </head>
以後作成するtemplateにbase.htmlを継承することで、TailWindCSSを使用可能とする。
{% extends "base.html" %}
⑧python manage.py tailwind start の実行
python manage.py tailwind start
このコマンドを実行するこどで、作成したテンプレート内のTailWindコードが
反映されるらしい。（しらんけど）
⑨python manage.py tailwind build の実行
全て開発が終わった際、最後に以下コマンドを実行し、Djangoファイルと結合するらしい。（しらんけど）python manage.py tailwind build
以上でDjangoでTailwind環境を構築手順は終了。
コメント
コメントを投稿