python3 web

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

記事内に広告が含まれています。

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

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

FlaskとTailwind CSSの環境構築

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

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

プロジェクトのディレクトリ構造

以下に、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ファイルが入る。

各ファイルとディレクトリの説明

  1. app.py
    • Flaskアプリケーションのメインファイルです。このファイルには、Flaskサーバーの起動やルートの定義が含まれています。
  2. node_modules/
    • Node.jsの依存関係がインストールされるディレクトリです。このディレクトリは npm install コマンドを実行したときに生成され、Tailwind CSSなどのパッケージが格納されます。
  3. templates/
    • FlaskのHTMLテンプレートを格納するディレクトリです。Flaskはこのディレクトリ内のテンプレートファイルをレンダリングします。例として index.html が含まれています。
  4. static/css/
    • 静的ファイルを格納するディレクトリです。ここにはビルド済みのCSSファイルが格納されます。例として output.css が含まれています。
  5. tailwind.config.js
    • Tailwind CSSの設定ファイルです。Tailwind CSSのカスタマイズや、CSSクラスを適用するテンプレートファイルのパスを指定します。
  6. package-lock.json
    • Node.jsプロジェクトの依存関係を正確に記録するためのファイルです。package.json に記載された依存パッケージのバージョンや、それらの依存関係が詳細に記録されています。
  7. package.json
    • Node.jsプロジェクトの設定ファイルです。プロジェクト名、バージョン、依存パッケージ、スクリプトなどが記載されています。例:
  8. .gitignore
    • Gitで無視するファイルやディレクトリを指定するファイルです。

Flaskのプロジェクト作成

必要なツール

  • Python (Flask用)
  • Node.js と npm (Tailwind CSS用)

Flaskのセットアップ

  1. 基本的な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)
  2. テンプレートディレクトリと 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='dist/output.css') }}">
</head>
<body>
    <h1 class="text-4xl font-bold text-center text-blue-500">Hello, Flask with Tailwind CSS!</h1>
</body>
</html>


現時点ではcssに関しては特に何もしていないので、特に装飾は確認できません。

Tailiwndcssのセットアップ

  1. Tailwindcssのインストールとセットアップ
    npm install -D tailwindcss
npx tailwindcss init
  2. package.jsonの編集
    package.jsonにscriptsを追加する。

    "scripts": {
    "dev": "npx tailwindcss -i ./src/input.css -o ./static/css/output.css --watch"
  }
  3. tailwind.config.jsの編集
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./templates/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
  4. input.cssの編集
    src/input.cssに次のコードを書く。

    @tailwind base;
@tailwind components;
@tailwind utilities;

FlaskとTailwind CSSの連携

  1. Flaskアプリケーションの実行
    python app.py
  2. Tailwind CSSの開発サーバーの実行
    別のターミナルウィンドウで以下のコマンドを実行します。

    npm run dev
ふゅか
最後にFlaskとTailwind CSSをどうやって連携するの？
はるか
Flaskアプリケーションを実行し、別のターミナルでnpm run devを実行するだけ。

これで、FlaskアプリケーションでTailwind CSSを使用する環境が整いました。開発中は npm run dev を実行してTailwind CSSの変更を監視します。

Flaskに関連する書籍

動かして学ぶ! Pythonサーバレスアプリ開発入門
Python FlaskによるWebアプリ開発入門 物体検知アプリ&機械学習APIの作り方
Flask Webアプリ開発実装ハンドブック

-python3, web
-,