FlaskとTailwind CSSの連携:Tailwind CSSの導入ガイド

はるか
FlaskとTailwind CSSの環境構築について話そうか。

ふゅか
いいわね!Tailwind CSSでFlaskのテンプレートをおしゃれに仕上げる方法を教えてくれる?
目次
1. FlaskとTailwind CSSの環境構築
FlaskとCSSフレームワークであるTailwind CSSを使用する環境を構築するための手順を以下に示します。この手順では、Flaskをバックエンドとして使用し、Tailwind CSSをフロントエンドに使用します。
Flaskの基本的な使い方を知りたい人は次のページを参考にしてください。
2. プロジェクトのディレクトリ構造
以下に、FlaskとTailwind CSSを統合したプロジェクトのディレクトリ構造を示します。
tailwind/
├── app.py
├── node_modules/
├── src/
│ └── input.css
├── templates/
│ └── index.html
├── static/
│ └── css/
│ └── output.css
├── tailwind.config.js
├── package-lock.json
├── package.json
└── .gitignore

はるか
例えば、app.pyはFlaskアプリケーションのメインファイルで、サーバーの起動やルートの定義が含まれている。

ふゅか
node_modules/には、Node.jsの依存関係がインストールされるのね。他には?

はるか
templates/にはHTMLテンプレートが、static/にはビルド済みのCSSファイルが入る。
2.1. 各ファイルとディレクトリの説明
- app.py
- Flaskアプリケーションのメインファイルです。このファイルには、Flaskサーバーの起動やルートの定義が含まれています。
- node_modules/
- Node.jsの依存関係がインストールされるディレクトリです。このディレクトリは
npm install
コマンドを実行したときに生成され、Tailwind CSSなどのパッケージが格納されます。
- Node.jsの依存関係がインストールされるディレクトリです。このディレクトリは
- templates/
- FlaskのHTMLテンプレートを格納するディレクトリです。Flaskはこのディレクトリ内のテンプレートファイルをレンダリングします。例として
index.html
が含まれています。
- FlaskのHTMLテンプレートを格納するディレクトリです。Flaskはこのディレクトリ内のテンプレートファイルをレンダリングします。例として
- static/css/
- 静的ファイルを格納するディレクトリです。ここにはビルド済みのCSSファイルが格納されます。例として
output.css
が含まれています。
- 静的ファイルを格納するディレクトリです。ここにはビルド済みのCSSファイルが格納されます。例として
- tailwind.config.js
- Tailwind CSSの設定ファイルです。Tailwind CSSのカスタマイズや、CSSクラスを適用するテンプレートファイルのパスを指定します。
- package-lock.json
- Node.jsプロジェクトの依存関係を正確に記録するためのファイルです。
package.json
に記載された依存パッケージのバージョンや、それらの依存関係が詳細に記録されています。
- Node.jsプロジェクトの依存関係を正確に記録するためのファイルです。
- package.json
- Node.jsプロジェクトの設定ファイルです。プロジェクト名、バージョン、依存パッケージ、スクリプトなどが記載されています。例:
- .gitignore
- Gitで無視するファイルやディレクトリを指定するファイルです。
3. Flaskのプロジェクト作成
3.1. 必要なツール
- Python (Flask用)
- Node.js と npm (Tailwind CSS用)
3.2. Flaskのセットアップ
- 基本的なFlaskアプリケーションの作成プロジェクトディレクトリに
app.py
ファイルを作成し、以下の内容を追加します。from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True)
- テンプレートディレクトリと
index.html
の作成templates/index.html
に基本的なHTMLテンプレートを追加します。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flask with Tailwind</title> <link rel="stylesheet" href="{{ url_for('static', filename='css/output.css') }}"> </head> <body> <h1 class="text-4xl font-bold text-center text-blue-500">Hello, Flask with Tailwind CSS!</h1> </body> </html>
現時点ではcssに関しては特に何もしていないので、特に装飾は確認できません。
3.3. Tailiwndcssのセットアップ
- Tailwindcssのインストールとセットアップ
npm install -D tailwindcss npx tailwindcss init
- package.jsonの編集
package.jsonにscriptsを追加する。"scripts": { "dev": "npx tailwindcss -i ./src/input.css -o ./static/css/output.css --watch" }
- tailwind.config.jsの編集
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./templates/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }
- input.cssの編集
src/input.css
に次のコードを書く。@tailwind base; @tailwind components; @tailwind utilities;
3.4. FlaskとTailwind CSSの連携
- Flaskアプリケーションの実行
python app.py
- Tailwind CSSの開発サーバーの実行
別のターミナルウィンドウで以下のコマンドを実行します。npm run dev

ふゅか
最後にFlaskとTailwind CSSをどうやって連携するの?

はるか
Flaskアプリケーションを実行し、別のターミナルでnpm run devを実行するだけ。
これで、FlaskアプリケーションでTailwind CSSを使用する環境が整いました。開発中は npm run dev
を実行してTailwind CSSの変更を監視します。
4. Flaskに関連する書籍
bookfanプレミアム
bookfanプレミアム
PR