Laravel 9+Vite 3项目中app.css新增CSS规则不生效求助

在Laravel 9.34.10、Vite 3.1.7、Tailwind 3.1.8环境中，此前Tailwind使用正常，但在app.css中新增的.button-info CSS规则无法生效，原有.button-success规则正常。

app.css代码：

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

@layer components {
  .button-success {
    @apply 
    rounded-none 
    bg-green-600 
    shadow-lg 
    text-white
  }
  .button-info {
    @apply 
    rounded-none 
    bg-blue-600 
    shadow-lg
  }
}

使用场景：在DistributionDataTable.php的Yajra数据表格按钮配置中，PRINT按钮使用.button-success样式正常显示，COPY按钮使用.button-info样式无效果。

已执行操作：

• php artisan optimize:clear
• npm run dev
• npm run build
• 清理浏览器缓存（Ctrl+F5）、更换浏览器

排查与解决步骤 #

1. 检查Tailwind内容扫描范围 #

Tailwind JIT模式仅编译被检测到的类名，若.button-info是在PHP后端动态配置的（比如Yajra Datatable的按钮），需确保tailwind.config.js的content项包含该PHP文件所在目录：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./app/Http/Controllers/**/*.php",
    "./app/DataTables/**/*.php", // 根据你的文件路径调整
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

修改后重新执行npm run dev或npm run build。

2. 验证按钮类名与样式加载 #

打开浏览器开发者工具：

• 确认COPY按钮元素上是否正确添加了.button-info类
• 在Styles面板中查找.button-info规则：找不到说明CSS未编译/加载；规则被划掉则说明存在更高优先级的样式（比如Yajra Datatable自带按钮样式）覆盖

3. 清除Vite缓存 #

Vite可能缓存旧编译结果，手动删除缓存目录后重新编译：

rm -rf node_modules/.vite
npm run dev

4. 检查Yajra按钮类名配置 #

确认DistributionDataTable.php中COPY按钮的类名配置无拼写错误：

->buttons([
    Button::make('print')->addClass('button-success'),
    Button::make('copy')->addClass('button-info'),
])

5. 临时关闭JIT模式测试 #

在tailwind.config.js中临时切换到AOT模式，验证样式是否生效：

module.exports = {
  // mode: 'jit', 注释此行或改为 mode: 'aot'
  // ...其他配置
}

若生效，说明问题根源是JIT模式未扫描到.button-info类，回到步骤1调整content配置即可。

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