Tailwind的dark变体是否支持与自定义类搭配使用？

默认情况下dark:前缀只能直接作用于Tailwind内置的工具类，未经过注册的自定义类无法直接搭配dark:变体使用，这就是你给出的示例代码失效的核心原因。你可以通过两种方式实现需求： #

方式1：自定义类内置明暗态规则，调用时无需加dark:前缀 #

把自定义类注册到Tailwind的components层，在类定义内部直接声明明暗两种状态的样式即可：

@layer components {
  .card-background {
    @apply bg-white dark:bg-black;
  }
}

HTML 直接调用类即可自动适配暗态：

<div class="card-background">
    Hello, world
</div>

方式2：支持dark:自定义类的调用形式，和内置工具类用法一致 #

如果需要和内置工具类一样，通过dark:前缀在调用时才指定暗态下的自定义类，把自定义类注册到utilities层即可，Tailwind v3 默认会自动为所有注册到层内的类生成dark变体，无需额外配置：

@layer utilities {
  .card-background {
    @apply bg-black;
  }
}

你示例中的HTML写法就可以正常生效：

<div class="bg-white dark:card-background">
    Hello, world
</div>

注意：所有需要适配Tailwind变体的自定义类都必须放到@layer规则中，写在层外的自定义类不会被Tailwind处理变体逻辑，也无法参与摇树优化。

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