Flask + HTMX + Tailwind 从入门到精通：构建现代感十足的轻量 Web 应用

最新推荐文章于 2025-11-16 14:07:01 发布

原创最新推荐文章于 2025-11-16 14:07:01 发布 · 738 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#flask #前端 #python

Python 同时被 2 个专栏收录

19 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

部署运行你感兴趣的模型镜像

前言

想要构建响应式页面却不想用复杂的 JS 框架？
HTMX + Flask + Tailwind 帮你优雅上手。

技术栈介绍

技术组件	用途	版本（截至 2025-07）
Flask	Python Web 框架	`3.0.2`
HTMX	HTML 扩展请求引擎	`1.9.6`（使用 CDN）
Tailwind CSS	CSS 原子类库	`v3.4.1`（通过 CDN 或 JIT 构建）
Python	解释器	推荐使用 `3.11+`

项目初始化与环境搭建

1. 创建并激活虚拟环境

python -m venv venv
source venv/bin/activate   # Windows: venv\Scripts\activate

2. 安装 Flask

pip install flask==3.0.2

项目结构

flask_htmx_demo/
├── app.py
├── templates/
│   ├── base.html
│   └── index.html

在这里插入图片描述

代码用例

无刷表单提交（HTMX + Flask）

1. `app.py`

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/submit", methods=["POST"])
def submit():
    name = request.form.get("name")
    return f"<p class='text-green-600'>你好，{name}！欢迎使用 HTMX 🚀</p>"

if __name__ == "__main__":
    app.run(debug=True)

2. `templates/base.html`

<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>Flask + HTMX</title>
  <script src="https://unpkg.com/htmx.org@1.9.6"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-900 p-6">
  {% block content %}{% endblock %}
</body>
</html>

3. `templates/index.html`

{% extends "base.html" %}

{% block content %}
<h1 class="text-2xl font-bold mb-4">HTMX 表单示例</h1>

<form hx-post="/submit" hx-target="#result" hx-swap="innerHTML" class="space-y-2">
  <input type="text" name="name" class="border rounded p-2 w-64" placeholder="输入你的名字">
  <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
    提交
  </button>
</form>

<div id="result" class="mt-4 text-lg"></div>
{% endblock %}

示例运行效果

运行 python app.py 后访问 http://127.0.0.1:5000/

用户输入名字，点击“提交”
页面局部刷新，无需整页跳转
结果显示在 <div id="result"> 中：

在这里插入图片描述

内容变更后，无需重启直接生效。
在这里插入图片描述

包名	用途	安装方式
flask==3.0.2	Web 框架	`pip install flask==3.0.2`
htmx.org	HTML 驱动 AJAX	`<script src="...htmx.org">`
tailwindcss	响应式 CSS	`<script src="...tailwindcdn">`
python-dotenv（可选）	配置管理	`pip install python-dotenv`