Tailwind CSS深色模式切换在旧版浏览器失效的解决求助

使用Tailwind CSS开发项目，已实现深色模式切换功能，在新版Chrome中正常运行，但安卓端Chrome 87等旧版浏览器无法工作：切换到深色模式时，dark:bg-slate-900这类深色模式类未生效，页面仍保留bg-gray-50等浅色模式类的样式。

相关配置代码如下：

// tailwind.config.cjs
module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  },
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
}

// Dark mode toggle logic
useEffect(() => {
  if (
    localStorage.getItem("theme") === "dark" ||
    localStorage.getItem("theme") === null
  ) {
    document.documentElement.style.backgroundColor = "#0f172a";
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.style.backgroundColor = "#fcfefc";
    document.documentElement.classList.remove("dark");
  }
}, [theme]);

// postcss.config.cjs
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

// package.json
{
  "name": "decker",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.4",
    "typescript": "^5.1.3",
    "vite": "5.0.12",
    "vite-plugin-pwa": "^0.17.4"
  }
}

1. 提前在DOM渲染前设置主题类 #

React的useEffect会在组件挂载后执行，旧版浏览器可能已经渲染完浅色样式，后续添加dark类时会因样式优先级冲突导致未生效。可以在index.html的<head>中添加内联脚本，在DOM开始渲染前就设置主题类：

<!-- index.html -->
<head>
  <script>
    // 提前判断主题并设置根元素类
    const savedTheme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (savedTheme === 'dark' || (savedTheme === null && prefersDark)) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  </script>
  <!-- 其他head内容 -->
</head>

同时修改React中的切换逻辑，只负责更新本地存储和状态，背景色交给Tailwind的样式类处理：

// 修改后的深色模式切换逻辑
const toggleTheme = () => {
  const currentTheme = localStorage.getItem('theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  localStorage.setItem('theme', newTheme);
  setTheme(newTheme); // 假设theme是你定义的状态变量
};

useEffect(() => {
  const root = document.documentElement;
  theme === 'dark' ? root.classList.add('dark') : root.classList.remove('dark');
}, [theme]);

2. 确保深色类在JSX中的顺序 #

Tailwind生成的dark:前缀样式与基础类优先级相同，若浅色类写在深色类之后，会覆盖深色样式。确保JSX中浅色类在前，深色类在后：

// 正确顺序
<div className="bg-gray-50 dark:bg-slate-900">...</div>

3. 调整Tailwind配置兼容旧版浏览器 #

Chrome 87对部分现代CSS特性支持有限，可移除future配置中的hoverOnlyWhenSupported（该特性与深色模式无关，但可能影响CSS生成逻辑）：

// 修改后的tailwind.config.cjs
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
}

4. 配置Autoprefixer的浏览器目标 #

在package.json中添加浏览器目标配置，让Autoprefixer为指定旧版浏览器生成兼容的CSS前缀：

// package.json
{
  "browserslist": [
    "Chrome >= 87",
    "Android >= 87"
  ]
}

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