如何在TailwindCSS 4中完全禁用暗黑模式

Tailwind CSS v4改用CSS文件作为主要配置方式后，若要完全禁用暗黑模式（让编译器彻底忽略所有dark:类，不生成对应CSS样式），可按以下方式配置：

在你的Tailwind CSS入口文件中，添加@config配置块并将darkMode设为false，示例代码如下：

@config {
  darkMode: false;
}

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

效果验证 #

使用你提供的测试代码：

<div class="bg-red-400 dark:bg-green-400 h-screen w-screen">
</div>

配置生效后，编译生成的CSS中将不会出现.dark\:bg-green-400相关的样式规则，彻底杜绝第三方组件或代码中dark:类带来的暗模式样式问题。

为什么之前的方法无效 #

你尝试的@custom-variant dark (&:where(.dark, .dark *));仅修改了暗黑模式的触发逻辑，但Tailwind仍会编译所有dark:类生成对应样式；而设置darkMode: false会直接让Tailwind跳过所有暗黑模式变体的处理，从根源上禁用相关样式生成。

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