Django模板中直接写@tailwind会报错，因其需PostCSS在构建时处理；正确做法是用tailwindcss CLI编译为纯CSS，再通过Django静态文件机制加载。
为什么直接在Django模板里写 @tailwind 会报错
Django模板引擎不解析 CSS 文件里的 @tailwind、@layer 或 @apply 指令——这些是 Tailwind 的 PostCSS 插件在构建时处理的指令，不是浏览器能运行的语法。你如果把 @tailwind base; 直接塞进 <style></style> 标签里，浏览器会忽略它，而且开发工具可能报“unknown at rule”警告。
真正需要的是：在 Django 项目外部完成 Tailwind 的编译（生成一个纯 CSS 文件），再用 Django 的静态文件机制加载它。
- Tailwind 编译必须由
tailwindcssCLI 或构建工具（如 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 构建进程。
- 运行
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' %}引入，而不是直接写<style></style>块 - 注意：不要把
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 类型，默认是支持的，但自定义中间件可能覆盖它
最常被跳过的动作：上线前手动执行一次 npx tailwindcss -i ... -o ...，然后立刻 collectstatic。没人帮你自动做这一步。
