Laravel 10中TailwindCSS突然失效，重装重建仍无法解决求协助

第一步：移除重复的资源引用 #

你的页面代码中同时使用了Vite指令和传统asset引用，会导致资源加载冲突。修改head部分，仅保留Vite统一处理资源：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログ</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

删除单独的<link rel="stylesheet" href="{{ asset('css/app.css') }}">和<script src="{{ asset('js/app.js') }}" defer></script>，@vite会自动处理资源的依赖顺序、加载属性等。

第二步：验证Tailwind配置文件 #

检查项目根目录的tailwind.config.js，确保content数组覆盖所有使用Tailwind类的文件路径，示例：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

路径遗漏会导致Tailwind无法扫描到你的类，进而不生成对应样式。

第三步：确认app.css的Tailwind基础指令 #

打开resources/css/app.css，确保开头包含以下核心指令：

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

这是Tailwind生成样式的基础，缺失则不会产生任何Tailwind相关样式。

第四步：清理缓存并重新构建 #

1. 清除Laravel缓存：

php artisan cache:clear
php artisan view:clear

2. 重置Vite编译环境：

• 停止当前运行的npm run dev进程
• 删除项目根目录下的node_modules/.vite文件夹
• 开发环境重新启动服务：npm run dev
• 生产环境执行构建：npm run build

第五步：确认开发服务器状态 #

确保npm run dev处于运行状态，Vite依赖实时编译机制，未启动服务时@vite指令无法加载最新样式文件。

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