Laravel+InertiaJs+Vite+Tailwind特定颜色渲染失败求助

技术栈：Laravel 10、Inertia 1、Vite 4、Tailwind 3
项目大部分Blade和Inertia文件CSS渲染正常，但出现随机异常：

• 昨日自定义颜色失效，间隔一段时间后自行恢复
• 今日标准Tailwind颜色slate-700及更深色失效，slate-600及更浅色、之前异常的自定义颜色可正常渲染
• 仅特定元素（如示例中文件输入框的file:bg-slate-700）出现该问题，其他元素的slate-700及更深色显示正常
• 无任何报错信息，问题随机复现，已尝试调整Vite CSS混合方式、测试页排查，未解决

相关配置文件 #

vite.config.js #

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                base: null,
                includeAbsolute: false
            }
        })
    ],
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue.es.js'),
        },
    },
});

tailwind.config.js（节选） #

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/js/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
}

app.js #

import './bootstrap';
import './main';

import { ZiggyVue } from 'ziggy'
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"
import '../css/app.css'

createInertiaApp({
  resolve: (name) =>
    resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob("./Pages/**/*.vue")
    ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(ZiggyVue)
      .mount(el)
  },
})

示例代码 #

<input multiple id="postImage" type="file" class="w-full text-slate-500 text-sm tracking-tight font-medium bg-lmhlBgInput shadow-sm rounded-lg focus:outline-1 focus:outline-lmhlMain1 border border-slate-400 focus:shadow-md file:bg-transparent file:border-0 file:bg-slate-600 file:mr-4 file:py-4 file:px-4 file:text-slate-400 file:cursor-pointer">

注：使用file:bg-slate-700及更深色时样式被忽略，该现象随机复现，间隔一段时间可能自行恢复

1. 强制清除全链路缓存

   • 清除Vite缓存：执行npm run build后重启npm run dev，或直接删除node_modules/.vite目录
   • 清除Laravel缓存：运行php artisan cache:clear && php artisan view:clear && php artisan config:clear
   • 浏览器端强制刷新（Ctrl+Shift+R），并禁用浏览器缓存测试

2. 完善Tailwind内容扫描与兜底配置

   • 确保tailwind.config.js的content数组覆盖所有使用Tailwind类的文件，比如补充"./resources/views/**/*.blade.php"（若有对应目录）
   • 给随机失效的类添加safeList兜底，避免Tailwind按需打包时遗漏：

     module.exports = {
       // ...其他配置
       safelist: [
         'file:bg-slate-700',
         'file:bg-slate-800',
         'file:bg-slate-900'
       ]
     }
     

3. 排查Vite热更新与模板配置冲突

   • 暂时关闭Vite的refresh功能，修改vite.config.js中laravel配置的refresh: false，测试是否还会出现随机失效
   • 调整Vue模板配置，将includeAbsolute设为true测试

4. 检查CSS优先级覆盖

   • 用浏览器开发者工具查看失效元素的样式面板，确认是否有其他规则（如@tailwindcss/forms插件的默认样式）覆盖了file:前缀的背景色
   • 临时添加!important测试（不推荐长期使用），比如file:bg-slate-700!，判断是否为优先级问题

5. 更新依赖至稳定版

   • 执行命令更新相关依赖到最新稳定版：

     npm update tailwindcss @vitejs/plugin-vue laravel-vite-plugin
     

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