在 Tailwind CSS 配置中设置自定义黑暗模式主题？

Question

我想在 Tailwind 配置中使用自定义主题来为明暗模式设置 primary/secondary 颜色。 Tailwind docs 仅在 html/jsx 元素中使用类，如下所示：

<div class="bg-white dark:bg-slate-900...

我不想在我的应用程序中的每个元素上声明它，而是想执行以下操作：

<div class="bg-primary text-secondary" />

然后在配置中，定义如下内容：

colors: {
  light: {
    primary: "white",
    secondary: "black",
  }
  dark: {
    primary: "black",
    secondary: "white",
  }
}

有谁知道这样做的方法吗？我正在将 Tailwind 与 React 结合使用。

Answer 1

您可以使用 @apply:

.bg-primary {
    @apply bg-white dark:bg-slate-900
}

/* ... */

您甚至可以编写脚本来生成此 CSS。

Setting custom dark mode theme in Tailwind CSS config?