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

$はるか$

はるか

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

$ふゅか$

ふゅか

いいわね！Tailwind CSSでFlaskのテンプレートをおしゃれに仕上げる方法を教えてくれる？

1. FlaskとTailwind CSSの環境構築
2. プロジェクトのディレクトリ構造
2.1. 各ファイルとディレクトリの説明
3. Flaskのプロジェクト作成
3.1. 必要なツール
3.2. Flaskのセットアップ
3.3. Tailiwndcssのセットアップ
3.4. FlaskとTailwind CSSの連携
4. Flaskに関連する書籍

1. FlaskとTailwind CSSの環境構築

FlaskとCSSフレームワークであるTailwind CSSを使用する環境を構築するための手順を以下に示します。この手順では、Flaskをバックエンドとして使用し、Tailwind CSSをフロントエンドに使用します。

Flaskの基本的な使い方を知りたい人は次のページを参考にしてください。

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などのパッケージが格納されます。
templates/
- FlaskのHTMLテンプレートを格納するディレクトリです。Flaskはこのディレクトリ内のテンプレートファイルをレンダリングします。例として index.html が含まれています。
static/css/
- 静的ファイルを格納するディレクトリです。ここにはビルド済みのCSSファイルが格納されます。例として output.css が含まれています。
tailwind.config.js
- Tailwind CSSの設定ファイルです。Tailwind CSSのカスタマイズや、CSSクラスを適用するテンプレートファイルのパスを指定します。
package-lock.json
- Node.jsプロジェクトの依存関係を正確に記録するためのファイルです。package.json に記載された依存パッケージのバージョンや、それらの依存関係が詳細に記録されています。
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: [],
}