Laravel9项目修改Blade文件后Vite未重载TailwindCSS类

问题原因分析 #

1. Tailwind重复配置冲突：你在vite.config.ts的laravel插件postcss选项中重复定义了Tailwind配置，同时又保留了独立的tailwind.config.js，导致Tailwind的文件监听逻辑混乱，无法响应Blade文件修改。
2. 路径拼写错误：vite.config.ts中Tailwind的content配置存在笔误：./resources/viewes/**/*.blade.php应为./resources/views/**/*.blade.php，虽非主因，但会影响对应目录的文件监听。
3. Vite监听触发逻辑未对齐：虽开启了reloadOnBladeUpdates，但重复配置导致Tailwind无法通过Vite的监听事件触发重新扫描编译。

修复步骤 #

步骤1：移除Vite配置中重复的Tailwind定义 #

修改vite.config.ts，删除laravel插件postcss里的Tailwind内联配置，改用加载外部tailwind.config.js文件，避免冲突：

import { defineConfig } from 'vite';
import laravel, { callArtisan, findPhpPath } from 'vite-plugin-laravel';

export default defineConfig({
    plugins: [
        laravel({
            postcss: ['tailwindcss', 'autoprefixer'], // 改为加载外部配置
            watch: {
                reloadOnBladeUpdates: true,
                input: [
                    {
                        condition: file => file.includes('resources/lang'),
                        handle: () => callArtisan(findPhpPath(), 'i18n:generate'),
                    },
                    {
                        condition: file => file.includes('routes/'),
                        handle: () => callArtisan(findPhpPath(), 'routes:generate'),
                    },
                ],
            },
        }),
    ],
});

步骤2：确认tailwind.config.js路径正确性 #

确保tailwind.config.js的content覆盖所有Blade文件路径，修正可能的笔误：

module.exports = {
    content: [
        './resources/views/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

步骤3：重启开发服务 #

停止当前运行的vite和php artisan serve，重新启动：

vite

php artisan serve

额外验证项 #

• 确认CSS入口文件（如resources/css/app.css）正确引入Tailwind指令：

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

• 确认Blade模板中通过Vite正确加载资源：

@vite(['resources/css/app.css', 'resources/js/app.js'])

完成以上修改后，修改Blade文件添加新Tailwind类时，Vite会自动监听文件变化，触发Tailwind重新扫描并编译CSS，无需手动重启服务或执行构建命令。

内容的提问来源于stack exchange，提问作者Tobias Schäfer