TailwindCSS切换dark类时暗黑模式样式未生效问题求助

核心问题：配置项位置错误 #

你的tailwind.config.js中把darkMode放在了theme对象内部，这是错误的。darkMode是Tailwind配置的顶级选项，必须和theme、content同级，否则Tailwind会忽略这个配置，默认使用media模式（跟随系统主题），导致手动添加dark类无法触发暗黑样式。

修正后的配置 #

将darkMode移到theme外部，设置为'class'：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: 'class', // 移至顶级配置位置
  theme: {
    extend: {
      boxShadow: {
        'custom': '0 2px 4px rgba(0, 0, 0, 0.1)'
      },
    },
    screens: {
      'sm': {'max': '550px'},
    },
    colors: {
      bgLight: 'hsl(0, 0%, 98%)',
      textColor: 'hsl(200, 15%, 8%)',
      bgDark: 'hsl(207, 26%, 17%)'
    },
    fontSize: {
      'sm': ['0.875rem', { lineHeight: '1.25rem' }], 
      'md': ['1.2rem', { lineHeight: '1.75rem' }],
      'big': '28px'
    },
  },
  plugins: [],
};

后续验证步骤 #

1. 重启开发服务器：Tailwind配置修改后必须重启服务，避免缓存导致配置未更新。
2. 确认根元素的dark类：确保dark类添加在<html>或<body>标签上（而非组件内部的div），Tailwind的class模式会基于根元素的dark类识别暗黑主题。
3. 排查样式覆盖：检查全局CSS是否存在优先级更高的background-color规则，避免覆盖Tailwind的类样式。

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