Laravel10+Sail+Breeze中Tailwind新增CSS类不生效问题咨询

在全新Laravel 10项目（基于Breeze Blade启动模板）中修改欢迎页文本颜色时遇到异常：将welcome.blade.php中某段落的text-gray-500替换为text-blue-500后，文本未变为蓝色，浏览器显示默认黑色——检查发现text-blue-500这个CSS类不存在。原本以为后台运行的Vite服务会自动处理该类的生成，想知道遗漏了哪些步骤。

复现步骤（Linux环境） #

curl -s https://laravel.build/l10 | bash
cd l10
./vendor/bin/sail up -d
./vendor/bin/sail composer require laravel/breeze --dev
./vendor/bin/sail artisan breeze:install
# 选择0对应Blade，其余两个问题选No
./vendor/bin/sail artisan migrate
./vendor/bin/sail npm i
./vendor/bin/sail npm run dev

补充现象：修改模板中已存在的样式类正常生效，但新增Tailwind类无效。执行./vendor/bin/sail npm run build后，public/build/assets下生成的CSS文件包含text-blue-500类，但本地服务器未加载该文件；而使用Vue模板在Welcome.vue中做相同颜色修改时则正常生效。

1. 确认Tailwind配置扫描路径
   打开项目根目录的tailwind.config.js，确保content数组包含Blade模板路径，配置应类似：

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

   只有./resources/**/*.blade.php在列表中，Tailwind才能扫描到Blade模板里的新样式类。

2. 重启Vite开发服务
   Vite开发模式下，Blade文件的变更不会像Vue组件那样触发Tailwind自动重新扫描。关闭当前运行的npm run dev进程，重新执行：

   ./vendor/bin/sail npm run dev
   

   重启后Vite会重新触发Tailwind的JIT扫描，生成包含新类的实时CSS。

3. 检查布局文件的Vite资源引入
   查看resources/views/layouts/app.blade.php（或欢迎页使用的布局文件），确保头部正确使用Vite指令引入资源：

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

   开发模式下这个指令会加载Vite服务器的实时编译资源，若手动改为加载build后的静态文件，会导致新样式类无法被加载。

4. 开发阶段不提前执行build
   开发时无需执行npm run build，该命令生成的是生产环境静态资源，会和Vite开发服务的实时资源冲突。如果已经执行过build，需要清除浏览器缓存后再刷新页面。

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