如何让Tailwind v4通过Vite识别Django模板中的CSS类？

核心问题 #

Tailwind v4需要明确指定扫描文件路径来生成对应CSS类，默认仅扫描Vite项目的src/目录，因此Django模板中的新添加类不会被识别。虽然v4默认不生成配置文件，但依然支持手动创建配置文件定义扫描范围。

解决方案步骤 #

1. 创建Tailwind配置文件
   在webapp/目录下新建tailwind.config.js（v4支持JS/TS格式配置），内容如下：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // 扫描Django模板目录，路径需匹配你的项目结构
    '../templates/**/*.html',
    // 保留Vite项目自身的文件扫描
    './src/**/*.{html,js,jsx,ts,tsx,vue}',
  ],
}

2. 更新Vite配置，关联Tailwind配置文件
   修改vite.config.js中的Tailwind插件配置，明确指向刚创建的配置文件：

import { defineConfig } from 'vite';
import { resolve } from 'path';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        // 指定Tailwind配置文件路径
        tailwindcss('./tailwind.config.js'),
    ],
    // 保留原有配置
    base: '/static/',
    build: {
        manifest: true,
        emptyOutDir: true,
        outDir: resolve(__dirname, 'dist'),
        rollupOptions: {
            input: {
                tailwind: resolve(__dirname, 'src/style.css'),
            },
        },
    },
    server: {
        watch: {
            usePolling: true,
            ignored: ['!../templates/**/*'],
        },
    },
});

3. 重启Vite开发服务
   停止当前运行的npm run dev命令，重新启动服务，让Tailwind重新扫描所有指定路径的文件。

4. 验证效果
   此时Django模板中添加的text-red-700等类应能正常生效，无论开发模式还是执行npm run build后的生产环境。

额外说明 #

• Tailwind v4只是默认不生成配置文件，并未移除配置能力，仍可通过手动创建配置文件定制内容扫描、主题等功能。
• 务必确保content数组中的路径与你的项目实际结构匹配，若模板目录位置不同，需对应调整路径规则。

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