无需nonde开发环境，轻量化使用tailwind+flask

发布时间：2026-01-21 公开文章

Base

基础知识

Civil

土木分类资料

Python

Python编程学习

Tools

自媒体效率工具

  1. 下载编译器 前往 Tailwind CSS Github Releases，根据你的系统下载对应的文件（例如 tailwindcss-windows-x64.exe 或 tailwindcss-macos-arm64）。 https://github.com/tailwindlabs/tailwindcss/releases

  2. 项目结构准备 建议将该文件放入项目根目录，并重命名为 tailwindcss。

1. 项目目录结构

在你的项目文件夹中按如下方式组织文件：

/my-flask-app
├── tailwindcss.exe      # 下载的二进制文件 (Mac/Linux 无后缀)
├── app.py               # Flask 主程序
├── tailwind.config.js   # Tailwind 配置
├── static/
│   ├── src/
│   │   └── input.css    # CSS 源码
│   └── dist/
│       └── output.css   # 自动生成的精简 CSS
└── templates/
    └── login.html       # 登录页面

2. Flask 程序 (app.py)

一个极其简单的逻辑：输入 admin / 123456 登录成功。

from flask import Flask, render_template, request, flash, redirect, url_for

app = Flask(__name__)
app.secret_key = 'secret_key_for_session'

@app.route('/')
def index():
    return redirect(url_for('login'))

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form.get('username')
        password = request.form.get('password')

        # 简单演示逻辑
        if username == 'admin' and password == '123456':
            return "<h1>登录成功！欢迎回来。</h1>"
        else:
            flash('用户名或密码错误', 'error')

    return render_template('login.html')

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

3. Tailwind 配置 (tailwind.config.js)

通过运行 ./tailwindcss init 生成后修改 content 部分：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./templates/**/*.html"], // 告诉编译器监控 templates 文件夹下的 html
  theme: {
    extend: {},
  },
  plugins: [],
}

4. CSS 源码 (static/src/input.css)

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";

5. 登录页面模板 (templates/login.html)

这里直接使用 Tailwind 的类名，配合 Flask 的 url_for 引入生成的 CSS。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - Flask + Tailwind</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='dist/output.css') }}">
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">

    <div class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-md">
        <div class="text-center mb-8">
            <h1 class="text-2xl font-bold text-slate-800">欢迎回来</h1>
            <p class="text-slate-500 text-sm">请登录您的账号</p>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            {% for category, message in messages %}
              <div class="bg-red-50 text-red-500 p-3 rounded-lg mb-6 text-sm border border-red-100">
                {{ message }}
              </div>
            {% endfor %}
          {% endif %}
        {% endwith %}

        <form action="/login" method="POST" class="space-y-6">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">用户名</label>
                <input type="text" name="username" required
                    class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">密码</label>
                <input type="password" name="password" required
                    class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition">
            </div>

            <button type="submit" 
                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded-lg transition shadow-lg shadow-blue-200">
                登录
            </button>
        </form>

        <p class="text-center text-slate-400 text-xs mt-8">
            &copy; 2026 极简开发方案
        </p>
    </div>

</body>
</html>

6. 如何运行（关键步骤）

  1. 启动 Tailwind 监听器： 打开一个终端窗口，运行以下命令（它会持续运行并观察文件变化）：
# Windows
./tailwindcss.exe -i ./static/src/input.css -o ./static/dist/output.css --watch

# Mac/Linux
chmod +x tailwindcss
./tailwindcss -i ./static/src/input.css -o ./static/dist/output.css --watch
  1. 启动 Flask： 打开另一个终端窗口，运行：
python app.py
  1. 访问： 打开浏览器访问 http://127.0.0.1:5000/login。

为什么这个方案很棒？

  • 实时预览： 当你在 HTML 里随手改一个类名（比如把 bg-blue-600 改成 bg-indigo-600），Tailwind CLI 会在毫秒内重新编译 CSS，Flask 页面刷新即生效。
  • 上线即巅峰： 部署时，你只需要带上 static/dist/output.css 这个文件，它只包含你用到的那几十个类，体积可能不到 10KB。
  • 零 Node 污染： 你的 Python 环境依然纯净。