はじめに
PythonのFastAPIでちょっとしたダッシュボードアプリを作成した際、フロントエンドをhtmxとTailwind CSSで整えようとして、少々ハマりました。インターネット接続が制限された環境だったので、Tailwind CSSのビルドをオフラインで動作させる必要があったためです。解決方法をまとめます。
Tailwind CSSとは
通常、Webサイトやアプリの見た目を整える際は、HTMLタグにクラス名を指定し、別途、CSSファイルにそのクラスのスタイル（フォントの大きさや色など）を記載します。この方法は自由に何でも決められる反面、クラス名とそれに対応するスタイルをすべて定義しないとけません。HTMLファイルとCSSファイルを行ったり来たりする調整作業に時間を要します。
Tailwind CSSは、あらかじめ用意されたユーティリティクラス（bg-red-500、flex、p-4など）をHTMLに書くだけで、あらかじめ用意されたスタイルを適用できるレームワークです。その「あらかじめ用意されたスタイル」をすべて準備するとCSSファイルのサイズが膨大になるため、実際に使用しているクラスだけを抽出して、軽量なCSSファイルを生成（ビルド）するプロセスが必要になります。
このビルド環境はNode.jsを使って構築するのが普通のようですが、諸般の理由でインターネット接続が制限された環境では難しいです。そこで、Node.jsを使わずに、Tailwind CSSのビルド環境を構築する方法を探しました。
環境
- OS: Windows 11
- インターネット接続: 直接は接続できないが、専用のリモート接続ブラウザ経由でファイルダウンロードは可
- CSS: Tailwind CSS v4 (Standalone CLI)
オフラインでのビルド環境構築結果
実行ファイルの入手
Tailwind CSSのGitHubのReleasesページから、Windows用の実行ファイル「tailwindcss-windows-x64.exe」をダウンロードしておきます。
配置
入手したWindows用の実行ファイルをtailwindcss.exeにリネームして以下のように配置します。FastAPIアプリでテンプレートとなるHTMLファイルと、CSSファイルの位置関係を固定しておきます。
project_root/
├── main.py
├── tailwindcss.exe # ダウンロードしたCLIツール
├── templates/ # HTMLファイル置き場
│ ├── base.html
│ └── ...
└── static/
└── css/
├── input.css # 設定と読み込み元はここに書く
└── style.css # 自動生成されるファイル（編集しない）
input.cssの記述
input.cssに検索パスを直接記述します（通常はtailwind.config.jsという設定ファイルを作成するようですが、その方法では上手くいきませんでした）。CSSファイルがある場所(static/css/)から見た相対パスで記述します。以下の設定で、「2つ上の階層にあるtemplatesフォルダの中身全部」を指定しています。
ファイル: static/css/input.css
@import "tailwindcss";
@source "../../templates";
Tailwind CSSサーバーの起動
HTMLファイルに記載したクラスを監視して自動的にCSSファイルをビルドしてもらうため、tailwindcss.exeがある場所でターミナルを開き、以下を実行します。PowerShellでは実行できず、コマンドプロンプトで実行する必要がありました。
.\tailwindcss.exe -i ./static/css/input.css -o ./static/css/style.css --watch
ここで、各オプションは以下のとおりです。
-i: 入力ファイル（設定を書いたファイル）
-o: 出力ファイル（HTMLで読み込むファイル）
--watch: ファイルの変更を監視して自動更新
HTMLを保存した瞬間に、ターミナルで Done in ... と表示され、ビルドされている様子が確認できます。
HTML側の記述
生成されたCSSファイルだけをbase.htmlに読み込みます。
ファイル: templates/base.html
<head>
<link rel="stylesheet" href="/static/css/style.css">
</head>
FastAPI側の記述
静的ファイルを配信するためのマウント設定を忘れないようにします。
ファイル: main.py
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
app = FastAPI()
# staticディレクトリを /static というURLで配信する
app.mount("/static", StaticFiles(directory="static"), name="static")
備考
新しく適用したクラスが効かなくて、なんでだろうと思うことがしばしばありました。理由は、Tailwind CSSサーバーを起動し忘れていた、という凡ミスでした。Windowsを再起動したときなど、忘れがちです。
まとめ
Tailwind CSSをWindows上でオフラインビルドする方法をまとめました。Tailwind CSSは、HTML内のクラス記述が長くなるため複雑そうに見えます。実際に使ってみると、やっぱり複雑なのですが、生成AIと組み合わせれば操作性は悪くないです。HTMLを編集した瞬間にTailwind CSSのサーバーが変更を認識して静的CSSファイルに書き出してくれるので、オフライン環境で動作させるシステムにも使えます。