目次
Python使いの人でフロントをやらない人は、CSSを自分で書きたくない人が多いと思います。
その際にTailwind CSSは便利です。
一方でPythonで開発しているとTailwind CSSのためだけにNode.jsを入れるのは面倒ですし、プロジェクトによっては不可の場合もあると思います。
そんな時は、pytailwindcssというパッケージを利用するとNode.jsを入れることなくPythonのみでTailwind CSSを利用することができます。
pytailwindcssの使い方
pytailwindcssのインストール
まずは下記のようにpipコマンドでpytailwindcssをインストールします。
pip install pytailwindcss
これでパッケージが入ります。
Tailwind CSSを入れる
先ほど入れたパッケージを利用してTailwindをインストールします。
下記のコマンドを実行してください。
tailwindcss
これでTailwind CSSがインストールされます。
Tailwind CSSのconfigファイルを作成する
次にtailwindを実行するのに必要なconfigファイルを作成します。
tailwindcss init
tailwind.config.jsがプロジェクトのルートディレクトリに作成されます。
設定ファイルを変更する。
先ほど作成されたconfigファイルの中身を変更します。
contentに自分がtailwindを利用するディレクトリを選択します。
jinja2を利用している方はtemplatesフォルダ以下でtailwindを使うと思うので、下記のように設定してください。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["templates/**/*.html"],
theme: {
extend: {},
},
plugins: [],
}
Tailwindで利用する入力用と出力用のCSSファイルを作成する
プロジェクトの好きな場所に入力用と出力用のCSSファイルを作成します。
下記の通り、入力用CSSにTailwindの指定を追加します。
@tailwind base;
@tailwind components;
@tailwind utilities;
HTMLファイルにCSSを記入する
Tailwind CSSは使われているクラスのみをビルドするため、configで指定したcontent内のHTMLに何も書いていないとCSSが出力されません。
試すだけなら下記のように、CDNからCSSを適用させると便利です。(tailwindを出力後に削除してください)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Tailwind Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-500">
<p class="text-white">
Tailwind CSSの利用例
</p>
</body>
</html>
Tailwind CSSでビルドする
実際に利用するCSSをビルドします。
下記のようにビルドコマンドを実行してください。
tailwindcss -i [入力用のcssファイルのパス] -o [出力用のcssファイルのパス] --minify
私はstaticディレクトリ配下にcssをまとめたフォルダ(css)があり、そこにinput.cssとoutput.cssという名前で入出力用cssを作成したので、下記のようにコマンドを入力しました。
tailwindcss -i static/css/input.css -o static/css/output.css --minify
FastAPI環境のJinjaで出力したCSSを適用する
出力したCSSを適用します。Python側とHTML側の設定が必要です。
Jinja2を利用している場合は、下記の通りに設定します。
python(FastAPI)側の設定
cssがstaticディレクトリ配下に入っているとしたら、下記の通りstatic配下を認識できるようにStaticFilesを設定します。
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from starlette.requests import Request
app = FastAPI()
# 静的ファイル（CSS）の設定
app.mount("/static", StaticFiles(directory="static"), name="static")
# Jinja2テンプレートの設定
templates = Jinja2Templates(directory="templates")
@app.get("/")
async def read_root(request: Request):
return templates.TemplateResponse("index.html", {"request": request})
HTML側の設定
次に、html(Jinja2テンプレート)を設定します。
仮にtemplates/index.htmlファイルに適用する場合は、下記のようにCSSを読み込むためのリンクを追加します。
cssディレクトリ配下にoutput.cssという名前で出力用cssを定義した場合です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FastAPI with Jinja2</title>
<link rel="stylesheet" href="{{ url_for('static', path='/css/output.css') }}">
</head>
<body>
<h1>Hello, FastAPI with Jinja2!</h1>
</body>
</html>
これでtailwind cssが適用されるはずです。
JinjaでTailwind CSSを利用する際の注意点
Tailwind CSSのクラス名を動的に生成する場合は、minifyで作成すると認識してくれずにCSSが適用できないるので注意しましょう。
参考