如何为Tailwind CSS定义b2c/b2b自定义主题前缀并支持暗黑模式？

核心思路 #

通过Tailwind的自定义变体（custom variants）功能，注册b2c:、b2b:前缀的变体，同时支持和dark:等内置变体的组合写法。本质是生成对应上下文的CSS选择器，匹配不同客户类型的页面环境。

步骤1：配置Tailwind自定义变体 #

在tailwind.config.js中添加自定义插件，注册b2c、b2b变体，以及它们和暗黑模式的组合变体：

module.exports = {
  // 采用class模式的暗黑模式，方便和自定义变体灵活组合
  darkMode: 'class',
  plugins: [
    require('tailwindcss/plugin')(({ addVariant, e }) => {
      // 注册b2c变体：匹配根元素带有data-theme-b2c类的场景
      addVariant('b2c', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.data-theme-b2c .${e(`b2c${separator}${className}`)}`
        })
      })

      // 注册b2b变体：匹配根元素带有data-theme-b2b类的场景
      addVariant('b2b', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.data-theme-b2b .${e(`b2b${separator}${className}`)}`
        })
      })

      // 注册dark:b2c组合变体：匹配暗黑模式+ B2C客户的场景
      addVariant('dark:b2c', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.dark.data-theme-b2c .${e(`dark:b2c${separator}${className}`)}`
        })
      })

      // 注册dark:b2b组合变体：匹配暗黑模式+ B2B客户的场景
      addVariant('dark:b2b', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.dark.data-theme-b2b .${e(`dark:b2b${separator}${className}`)}`
        })
      })
    })
  ],
  variants: {
    extend: {
      // 给需要的样式属性启用自定义变体，按需添加
      backgroundColor: ['b2c', 'b2b', 'dark:b2c', 'dark:b2b'],
      textColor: ['b2c', 'b2b', 'dark:b2c', 'dark:b2b'],
      // 可追加borderColor、padding、margin等其他属性
    },
  },
}

步骤2：设置页面根元素标识 #

根据访问客户的类型，给页面根元素（如<html>或<body>）添加对应类：

• B2C客户：<html class="data-theme-b2c">
• B2B客户：<html class="data-theme-b2b">
• 暗黑模式下的B2C客户：<html class="dark data-theme-b2c">

这个标识可通过后端渲染动态输出，或前端通过接口判断后添加到根元素。

步骤3：使用自定义变体类 #

现在可以直接使用你想要的写法：

<div class="b2c:bg-blue-400 b2b:bg-green-400 dark:b2c:text-white dark:b2b:text-gray-100">
  面向B2C/B2B客户的自适应内容
</div>

可选：改用data属性标识 #

如果偏好data属性而非类名，可修改addVariant中的选择器：

addVariant('b2c', ({ modifySelectors, separator }) => {
  modifySelectors(({ className }) => {
    return '[data-theme="b2c"] .${e(`b2c${separator}${className}`)}'
  })
})

对应的根元素设置为：<html data-theme="b2c">

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