在Django模板中如何正确编译Tailwind CSS-css教程-PHP中文网

Django模板中直接写@tailwind会报错，因其需PostCSS在构建时处理；正确做法是用tailwindcss CLI编译为纯CSS，再通过Django静态文件机制加载。

在django模板中如何正确编译tailwind css

为什么直接在Django模板里写 `@tailwind` 会报错

Django模板引擎不解析 CSS 文件里的 @tailwind、@layer 或 @apply 指令——这些是 Tailwind 的 PostCSS 插件在构建时处理的指令，不是浏览器能运行的语法。你如果把 @tailwind base; 直接塞进标签里，浏览器会忽略它，而且开发工具可能报“unknown at rule”警告。

真正需要的是：在 Django 项目外部完成 Tailwind 的编译（生成一个纯 CSS 文件），再用 Django 的静态文件机制加载它。

Tailwind 编译必须由 tailwindcss CLI 或构建工具（如 Vite、esbuild）执行，不能靠 Django 模板渲染
STATICFILES_DIRS 要包含编译后的 CSS 输出路径（比如 static/css/output.css）
确保 DEBUG=True 时能访问到该文件；生产环境需运行 python manage.py collectstatic

如何配置 `tailwind.config.js` 适配 Django 模板路径

Tailwind 需要扫描所有可能含 class 名的文件，才能安全地 tree-shake 未使用的样式。Django 模板默认不在标准 JS/TS 路径下，所以必须显式告诉它去哪里找 .html 文件。

在 tailwind.config.js 的 content 字段中，明确列出模板目录：

module.exports = {
  content: [
    "./templates/**/*.html",     // 主模板目录
    "./myapp/templates/**/*.html", // 各 app 的 templates
    "./**/templates/**/*.{html,js}", // 更宽泛的匹配（按需）
  ],
  theme: { /* ... */ },
  plugins: [],
}

别只写 "./templates/**/*"——通配符 * 不匹配 .html，必须写成 *.html
如果用了 Django 的 APP_DIRS=True，且模板分散在各 app 下，就一定要把每个 app/templates/ 加进去，否则大量 class 会被误删
开发时建议加 "./**/*.py"（可选）：如果你在 Python 文件里用 mark_safe() 拼 HTML 字符串，也需要被扫描

开发阶段怎么让 CSS 修改实时生效

Django 自身不监听 CSS 变化，所以不能指望刷新页面就看到 Tailwind 更新。你需要额外启动一个独立的 Tailwind 构建进程。

Tailwind CSS 3.4.19

Tailwind CSS 3.4.19 是 v3 长期维护分支版本，适合仍使用 v3 配置和构建流程的项目。此页提供 npm 官方包。

下载

运行 npx tailwindcss -i ./static/src/input.css -o ./static/css/output.css --watch（假设你把源文件放在 static/src/input.css）
确保 input.css 中有 @tailwind base;、@tailwind components;、@tailwind utilities;
在模板中用 {% static 'css/output.css' %} 引入，而不是直接写块
注意：不要把 output.css 提交进 Git——它属于构建产物，应加入 .gitignore

如果用 Vite 或 Webpack，可把 Tailwind 当作 CSS 处理链一环，但对纯 Django 项目，上面的 --watch 方式最轻量、最可控。

生产环境部署时容易漏掉的关键步骤

很多人本地跑得好好的，上线后样式全丢，问题往往出在静态文件路径和构建时机上。

CI/CD 流程中，必须在 collectstatic 之前运行 Tailwind 编译命令，否则 output.css 是旧的或缺失的
STATIC_ROOT 和 STATICFILES_DIRS 必须都指向实际存在且可读的路径；检查 python manage.py findstatic css/output.css 是否返回有效路径
Nginx/Apache 如果启用了缓存，记得清掉旧 CSS 的缓存（比如加版本参数：{% static 'css/output.css' %}?v={{ BUILD_VERSION }}）
若使用 Whitenoise，确认它支持 .css 文件 MIME 类型，默认是支持的，但自定义中间件可能覆盖它