Django项目中Tailwind默认颜色失效，仅自定义颜色可用

算力阿峰

2026-8-2

Django + Tailwind CSS 重启项目后默认颜色失效的解决方案

重启VSCode后Tailwind默认颜色类（如bg-blue-400）失效，但自定义颜色正常，本质是Tailwind未重新扫描模板生成包含默认类的CSS文件——Tailwind采用按需打包机制，只有模板中实际用到的类才会被加入最终CSS文件。

重启Tailwind监听服务
每次重启项目后，必须启动Tailwind的实时监听命令（对应Django Tailwind插件的启动命令）：
```
python manage.py tailwind start
```
该命令会持续扫描模板文件变化，自动更新CSS。仅启动Django服务不会触发Tailwind的样式构建。
修正content路径配置
你的tailwind.config.js中content路径存在冗余，可能导致Tailwind无法正确识别模板位置。根据项目实际结构简化路径，比如若配置文件位于项目根目录/tailwind/，模板在项目根目录/templates/及各app的templates/下，可修改为：
```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    '../templates/**/*.html',
    '../**/templates/**/*.html',
  ],
  theme: {
    extend: {
      colors: {
        'jcblue1': '#5CB5FD',
        'spook': '#3C4856',
      }
    },
  },
  plugins: [],
}
```
手动触发全量构建
如果监听服务未自动生效，先执行强制构建命令，让Tailwind重新扫描所有模板并生成完整CSS：
```
python manage.py tailwind build
```
验证CSS引入与缓存
1. 确认模板中正确引入Tailwind生成的CSS：
```
<link rel="stylesheet" href="{% static 'css/dist/styles.css' %}">
```
  路径需匹配你的静态文件配置。
2. 强制刷新浏览器（Ctrl+Shift+R/Cmd+Shift+R）清除缓存，避免加载旧的CSS文件。