如何在Tailwind CSS中禁用自动切换至暗黑模式

方法1：修改Tailwind配置完全禁用暗黑模式 #

TailwindCSS 默认采用 media 模式（跟随系统主题自动切换），即便你没编写暗黑样式，部分默认样式仍会受系统媒体查询影响。直接在配置中关闭暗黑模式即可解决：

1. 打开项目根目录的 tailwind.config.js 文件
2. 将 darkMode 选项设置为 false：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: false, // 禁用暗黑模式，强制使用浅色样式
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

方法2：移除/修改系统主题检测代码 #

如果你的项目中存在手动检测系统主题并添加 dark 类的代码（比如在 _app.js、layout.js 或全局脚本中），需要删除或调整这部分逻辑：

• 删除类似以下自动添加 dark 类的代码：

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark')
}

• 若要确保页面始终处于浅色模式，可强制移除 dark 类：

// 在页面初始化时执行
document.documentElement.classList.remove('dark')

验证修改 #

重启开发服务器，切换系统主题后，网站将保持浅色样式不变。

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