如何在TailwindCSS v4中结合@variant dark与@theme实现暗黑模式颜色覆盖

TailwindCSS v4移除了tailwind.config.js文件，明暗主题的实现逻辑和v3差异较大。你在v3中通过@layer base给:root和.dark类定义自定义CSS属性的方式，在v4中需要通过新的@theme和@variant指令来实现。

你之前尝试的写法无法生效，核心问题是把@variant块放在了@theme外部，导致变体的主题变量无法正确集成到Tailwind的主题系统中。以下是正确的实现方式：

方式一：使用默认dark变体 #

TailwindCSS v4默认内置了dark变体（基于.dark类触发），无需自定义即可直接使用：

@import "tailwindcss";
@import "@fontsource-variable/montserrat";

@theme {
  /* 浅色主题变量 */
  --color-background: 0 0% 4%;
  --color-foreground: 0 0% 98%;

  /* 深色主题下的变量覆盖 */
  @variant dark {
    --color-background: 0 0% 98%;
    --color-foreground: 0 0% 4%;
  }
}

方式二：自定义dark变体选择器 #

如果你需要自定义dark变体的触发逻辑（比如你之前写的&:where(.dark, .dark *)），可以先通过@custom-variant定义变体，再在@theme内部使用：

@import "tailwindcss";
@import "@fontsource-variable/montserrat";

/* 自定义dark变体的选择器 */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* 浅色主题变量 */
  --color-foreground: 0 0% 8%;
  --color-background: 0 0% 98%;

  /* 应用自定义的dark变体覆盖变量 */
  @variant dark {
    --color-foreground: 0 0% 98%;
    --color-background: 0 0% 3.9%;
  }
}

相关文档内容（翻译） #

添加自定义变体

自定义变体允许你创建专属的样式变体，用于在特定条件下应用样式。你可以通过@custom-variant指令定义变体名称和对应的CSS选择器规则。

定义自定义变体

使用@custom-variant指令创建新变体：

@custom-variant [变体名称] ([CSS选择器模式]);

例如：

@custom-variant dark (&:where(.dark, .dark *));

该示例定义了名为dark的变体，当元素自身或其祖先元素包含.dark类时，该变体的样式会生效。

在主题中使用自定义变体

定义好自定义变体后，可在@theme块内通过@variant指令，为该变体覆盖主题变量：

@theme {
  /* 默认主题变量 */
  --xxx: [值];

  @variant [变体名称] {
    /* 变体下的变量覆盖 */
    --xxx: [新值];
  }
}

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