皆さま、こんにちは
今日は、DjangoフレームワークでTailwindCSSを使用出来るようにします。
OSは、「Ubuntu 20.04.4 LTS」を使用しております。
先ず、nodeがv10.xxでしたのでv16.xxを導入します。
（＄と＃はプロンプトです）
NodeバージョンマネージャにてNodeを導入します。
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
$ source ~/.bashrc
利用可能なNodeバージョンを確認します。
$ nvm list-remote
・
・
v16.14.1 (LTS: Gallium)
v16.14.2 (LTS: Gallium)
-> v16.15.0 (Latest LTS: Gallium)
v17.0.0
v17.0.1
今回は、バージョン16のLTSを導入します。
$ nvm install v16.15.0
$ nvm list
-> v16.15.0
system
default -> v16.15.0
node -> stable (-> v16.15.0) (default)
stable -> 16.15 (-> v16.15.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/gallium (-> v16.15.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.19.3 (-> N/A)
lts/gallium -> v16.15.0
$ node -v
v16.15.0
インストールする環境が整いましたので
Djangoでプロジェクトを作成してサンプルページを表示出来るように下準備します。
$ mkdir tailwindcss
$ cd tailwindcss/
$ python -m venv myvenv
$ source myvenv/bin/activate
$ pip install Django==3.2.13
$ django-admin startproject config .
$ python manage.py startapp app
次に
config/setting.py
config/urls.py
app/urls.py
app/views.py
にindex.htmlを表示出来るように設定します。
以下の順番でTailwindをインストールします。
$ mkdir work
$ cd work
$ npm init -y
$ npm install tailwindcss@latest postcss@latest autoprefixer@latest
$ npx tailwindcss init
インストールフォルダーに以下のファイルを作成します。
./work/tailwind.css
-------------------------------
@tailwind base;
@tailwind components;
@tailwind utilities;
--------------------------------
TailwindCSSをcssへ書き出します。
$ npx tailwindcss-cli@latest build tailwind.css -o ../static/css/tailwind.css
$ cd ../
テンプレートのindex.htmlを以下ように変更します。
template/app/index.html
--------------------------------
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'css/tailwind.css' %}" />
<title>ハロー TailwindCSS</title>
</head>
<body>
<h1 class="text-3xl font-bold underline text-center bg-blue-300">
Hello TailwindCSS!!!
</h1>
</body>
</html>
--------------------------------
Djangoを起動します。
$ python manage.py runserver 0:8000
無事適用出来ました。
詳細は、
やチートシートの
が参考になるかと思います。
では