Laravel 9+React+Tailwind CSS在npm run dev/build下不生效问题

你的问题核心是Tailwind的指令未被编译为实际CSS，构建后的文件仍保留@tailwind语句，说明Vite未触发Tailwind的处理流程。按以下步骤修复：

1. 补全Tailwind依赖与PostCSS配置 #

首先确保安装Tailwind所需的PostCSS工具链：

npm install -D tailwindcss postcss autoprefixer

然后初始化PostCSS配置文件（若尚未生成）：

npx tailwindcss init -p

该命令会自动生成postcss.config.js，内容需包含Tailwind插件：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Vite会自动读取此配置，通过PostCSS解析CSS中的Tailwind指令。

2. 调整Vite插件顺序（可选） #

确保vite.config.js中laravel插件处于最后，保证资源处理流程正确：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        react(),
        laravel({
            input: ['resources/js/app.jsx'],
            refresh: true,
        }),
    ],
});

3. 清理缓存并重新构建 #

删除旧构建产物与缓存，避免残留问题：

rm -rf public/build
rm -rf node_modules/.cache
npm run dev

4. 验证Tailwind生效情况 #

在React组件（如Routers）中添加测试代码：

<div className="text-3xl font-bold text-blue-600">Tailwind测试文本</div>

启动php artisan serve与npm run dev后，检查页面是否显示蓝色加粗的大文本。

关键检查点 #

• 确认resources/css/app.css中的@tailwind指令无拼写错误
• 确认tailwind.config.js的content路径覆盖了所有使用Tailwind类的文件（你的配置已包含.blade.php与.jsx，无需修改）
• 确保app.jsx中正确导入了../css/app.css

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