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

Question

我想在 Tailwind 配置中使用自定义主题来设置浅色和深色模式的主要/次要颜色。Tailwind 文档仅使用 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 一起使用。

score 2 · Accepted Answer

您可以使用@apply：

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

/* ... */

你甚至可以编写一个脚本来生成这个 CSS。

1 回答 1