如何像暗黑模式一样为Tailwind扩展更多主题模式？

Tailwind的暗黑模式基于类选择器实现，你可以用同样的思路扩展出更多自定义主题，下面分两种场景说明：

一、添加基于HTML类名的自定义主题 #

比如要新增一个high-contrast（高对比度）主题，步骤如下：

1. 修改tailwind.config.js，通过插件API注册自定义变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class', // 保留原有暗黑模式的类配置
  plugins: [
    function({ addVariant }) {
      // 注册high-contrast变体，匹配父级包含.high-contrast类的元素
      addVariant('high-contrast', '.high-contrast &');
    }
  ],
  // 其他配置（content、theme等）...
}

2. 在HTML中添加类名，并使用high-contrast:前缀编写样式：

<!-- 包裹在.high-contrast类的容器中 -->
<div class="high-contrast">
  <p class="text-gray-700 high-contrast:text-black">普通文本 / 高对比度文本</p>
  <button class="bg-blue-500 hover:bg-blue-600 high-contrast:bg-blue-800 high-contrast:hover:bg-blue-900">操作按钮</button>
</div>

如果需要批量添加多个类主题，可以循环注册：

plugins: [
  function({ addVariant }) {
    const themes = ['high-contrast', 'sepia', 'retro'];
    themes.forEach(theme => {
      addVariant(theme, `.${theme} &`);
    });
  }
]

二、使用自定义选择器实现变体 #

除了类名，还可以基于属性、媒体查询等自定义选择器创建变体，比如基于data-theme属性的主题，或者系统偏好的动效控制：

1. 在tailwind.config.js中注册自定义选择器变体：

plugins: [
  function({ addVariant }) {
    // 基于[data-theme="minimal"]属性的变体
    addVariant('minimal', '[data-theme="minimal"] &');
    // 基于系统偏好的减少动效变体
    addVariant('motion-reduce', '@media (prefers-reduced-motion: reduce)');
  }
]

2. 实际使用示例：

<!-- 属性式主题 -->
<div data-theme="minimal">
  <div class="bg-gray-100 minimal:bg-white">容器背景</div>
</div>

<!-- 基于系统偏好的动效控制 -->
<div class="animate-bounce motion-reduce:animate-none">动态元素</div>

注意事项 #

• 自定义变体支持嵌套状态，比如可以注册high-contrast-hover来匹配高对比度模式下的hover状态：addVariant('high-contrast-hover', '.high-contrast &:hover')
• 如果需要精确控制哪些工具类启用自定义变体，可以在variants.extend中配置，比如：

module.exports = {
  variants: {
    extend: {
      backgroundColor: ['high-contrast', 'minimal'],
      textColor: ['high-contrast', 'minimal'],
    }
  }
}

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