Laravel+Vite+FluxUI生产环境下TailwindCSS暗黑模式失效问题

问题情况 #

• 本地环境正常：<head>内的内联脚本可根据localStorage存储值或系统偏好，为<html>元素添加dark类，Tailwind暗黑模式样式正常生效
• 生产环境（Laravel Forge配置Nginx服务器）异常：
  • 即便用户偏好暗黑模式，页面仍以浅色模式加载
  • 暗黑模式切换功能失效，甚至出现样式混合混乱状态
  • 手动为<html>设置dark类会被立即移除；控制台执行Flux.dark = true返回true，但暗黑模式未切换，<html>始终无法添加dark类

当前配置 #

tailwind.config.js内容：

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'selector',
  // ...其他配置项
};

已参考资源 #

• Flux UI：分段单选组件
• TailwindCSS v4 暗黑模式说明

排查修复方案 #

1. 调整内联脚本执行时机
   生产环境下Vite可能延迟加载FluxUI/Alpine.js，导致内联脚本先执行时Flux对象尚未初始化，后续Flux初始化会覆盖状态。将内联脚本改为DOM加载完成后执行：

   document.addEventListener('DOMContentLoaded', () => {
     const savedMode = localStorage.getItem('darkMode');
     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
     const enableDark = savedMode ? savedMode === 'true' : prefersDark;
     
     if (enableDark) {
       document.documentElement.classList.add('dark');
       Flux.dark = true;
     }
   });
   

2. 检查Vite构建压缩配置
   确认vite.config.js中未禁用或压缩内联脚本；也可将暗黑模式逻辑抽成单独脚本文件，通过Vite打包引入，避免内联脚本被意外处理。

3. 清理Nginx缓存
   生产环境Nginx可能缓存了旧页面资源，导致新的暗黑模式逻辑未生效。清理Nginx缓存，或依赖Vite默认的资源哈希机制确保资源更新。

4. 同步FluxUI状态与DOM类名
   FluxUI的暗黑模式状态可能未与<html>的dark类绑定，添加状态监听实现同步：

   document.addEventListener('flux:dark-mode-changed', (e) => {
     document.documentElement.classList.toggle('dark', e.detail);
     localStorage.setItem('darkMode', e.detail);
   });
   

5. 验证Tailwind生产构建配置
   确认darkMode: 'selector'在生产构建中未被覆盖；检查编译后的CSS文件是否包含.dark前缀的样式，确保Tailwind正确生成暗黑模式样式。

内容的提问来源于stack exchange，提问作者Edvard Åkerberg