使用Tailwind修改Root背景色：暗黑模式下Root仍为白色的问题

核心原因 #

你遇到的问题是根元素（html/body/#root）没有跟随暗黑模式切换背景色，Tailwind的暗黑模式默认只会作用于你编写的组件内部，而根元素的默认白色背景不会自动被覆盖，滚动时就会露出。

分步解决方案 #

1. 确认Tailwind暗黑模式配置 #

打开tailwind.config.js，确保darkMode设置为'class'——这是通过类名切换暗黑模式的前提：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class', // 必须设为class，才能通过添加类触发暗黑模式
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

2. 在Context中同步html元素的dark类 #

修改ContextProvider.js，确保切换暗黑模式时，给html元素添加/移除dark类，初始化时也要同步：

import { createContext, useContext, useState, useEffect } from 'react';

const DarkModeContext = createContext();

export function ContextProvider({ children }) {
  const [darkMode, setDarkMode] = useState(false);

  // 初始化时从localStorage读取并设置html类
  useEffect(() => {
    const savedMode = localStorage.getItem('darkMode');
    const initialMode = savedMode ? JSON.parse(savedMode) : false;
    setDarkMode(initialMode);
    if (initialMode) {
      document.documentElement.classList.add('dark');
    }
  }, []);

  const toggleDarkMode = () => {
    setDarkMode(prev => {
      const newMode = !prev;
      // 同步html元素的dark类
      if (newMode) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
      localStorage.setItem('darkMode', JSON.stringify(newMode));
      return newMode;
    });
  };

  return (
    <DarkModeContext.Provider value={{ darkMode, toggleDarkMode }}>
      {children}
    </DarkModeContext.Provider>
  );
}

export function useDarkMode() {
  return useContext(DarkModeContext);
}

3. 给根元素设置跟随模式的背景色 #

有两种方式实现：

方式一：全局CSS设置

在src/index.css（如果没有就新建）中添加：

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

/* 让html元素背景跟随暗黑模式 */
html {
  @apply bg-white dark:bg-gray-900;
}

/* 确保#root继承背景，不要有白色背景 */
#root {
  @apply bg-transparent min-h-screen;
}

方式二：App组件最外层容器设置

如果不想用全局CSS，直接在App.js的最外层容器添加背景类和最小高度：

import { useDarkMode } from './ContextProvider';

function App() {
  const { darkMode, toggleDarkMode } = useDarkMode();
  return (
    <div className="min-h-screen bg-white dark:bg-gray-900">
      {/* 切换按钮示例 */}
      <button onClick={toggleDarkMode} className="m-4 p-2 rounded">
        {darkMode ? '切换到浅色模式' : '切换到深色模式'}
      </button>
      {/* 长内容用于测试滚动 */}
      <div className="h-[200vh] p-4 text-black dark:text-white">
        测试滚动内容...
      </div>
    </div>
  );
}

export default App;

4. 检查硬编码背景 #

确认public/index.html中的#root元素没有硬编码的style="background:white"属性，比如：

<!-- 正确示例 -->
<div id="root"></div>

验证效果 #

完成以上步骤后，切换暗黑模式，滚动页面就不会再露出白色背景了——根元素的背景会跟随模式切换为深色，长内容滚动时也会保持一致的背景色。

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