Tailwind 自定义主题前缀如 dark:{class}

Question

我正在开发一个拥有两种类型客户“b2c”和“b2b”的网站。我想根据访问页面的客户类型来设置不同的页面样式。

有没有办法定义自定义顺风主题前缀，例如

b2c:bg-blue-400

和

b2b:bg-green-400

我见过这个效果的例子。 headlessui 标签

此外是否还可以允许深色模式选项，例如

b2c:text-black dark:b2c:text-white

我尝试修改默认主题，但找不到让我根据给定主题在两个不同的类选项之间进行选择的解决方案。

Answer 1

您可以考虑使用 Tailwind 插件来注册自定义静态变体。例如，如果 b2c 和 b2b 分别由某个父类

b2c

和

b2b

标识，你可以这样做：

const plugin = require('tailwindcss/plugin')

module.exports = {
  // …
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('b2c', '.b2c &');
      addVariant('b2b', '.b2b &');
    }),
  ],
};

这些将允许您使用像

b2c:bg-blue-400

和

b2b:bg-green-400

这样的类名，这将生成如下 CSS：

.b2c .b2c\:bg-blue-400 {
  …
}

.b2b .b2b\:bg-green-400 {
  …
}

此外，这些新变体将自动与其他变体一起使用，例如

dark:b2c:text-white

，这会生成类似以下内容：

@media (prefers-color-scheme: dark){
  .b2c .dark\:b2c\:text-white {
    …
  }
}