如何在已有的Django应用demo_app中集成使用Tailwind CSS

1. 前期配置检查 #

• 确认demo_app已经添加到项目settings.py的INSTALLED_APPS列表中
• 确认settings.py中已经配置了静态文件相关参数：

# settings.py
STATIC_URL = 'static/'
# 开发环境静态文件查找路径配置
STATICFILES_DIRS = [
    BASE_DIR / "static",
]
# 生产环境collectstatic输出路径
STATIC_ROOT = BASE_DIR / "staticfiles"

2. 初始化npm环境并安装依赖 #

进入你的demo_app根目录，执行以下命令：

• 初始化npm项目（一路回车即可，后续可改配置）：
  npm init -y
• 安装Tailwind及相关依赖：
  npm install -D tailwindcss postcss autoprefixer
• 生成Tailwind和PostCSS配置文件：
  npx tailwindcss init -p

3. 修改Tailwind扫描路径配置 #

打开demo_app目录下生成的tailwind.config.js，修改content字段，指定Tailwind需要扫描的模板文件路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 按需添加前缀避免和现有样式冲突，不需要可以删掉
  prefix: '',
  content: [
    // 扫描demo_app下所有模板文件
    "./templates/**/*.html",
    // 如果有静态js文件用到Tailwind类名也可以加上
    "./static/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 创建Tailwind入口CSS #

在demo_app的静态目录下创建路径static/demo_app/css/src/input.css，写入以下内容：

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

5. 配置打包命令 #

打开demo_app目录下的package.json，修改scripts字段添加打包命令：

{
  "scripts": {
    "dev": "tailwindcss build -i ./static/demo_app/css/src/input.css -o ./static/demo_app/css/dist/tailwind.css --watch",
    "build": "tailwindcss build -i ./static/demo_app/css/src/input.css -o ./static/demo_app/css/dist/tailwind.css --minify"
  }
}

6. 模板中引入打包后的CSS #

在你需要使用Tailwind的demo_app模板文件中，头部引入静态文件标签和打包好的CSS：

{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>示例页面</title>
  <!-- 引入Tailwind打包后的CSS文件 -->
  <link rel="stylesheet" href="{% static 'demo_app/css/dist/tailwind.css' %}">
</head>
<body>
  <!-- 直接写Tailwind类名即可生效 -->
  <div class="text-blue-500 text-2xl font-bold">测试Tailwind样式</div>
</body>
</html>

7. 开发&生产使用说明 #

• 开发阶段：在demo_app目录下执行npm run dev，命令会持续监听模板文件变化，自动重新打包CSS，修改Tailwind类名后刷新页面即可生效
• 生产部署前：先在demo_app目录下执行npm run build生成压缩后的CSS文件，再执行Django的python manage.py collectstatic收集静态文件即可

内容的提问来源于stack exchange，提问作者Anjayluh