如何使用Tailwind CSS创建多个可切换的自定义主题？

你可以沿用熟悉的data-theme实现思路，只需要额外完成Tailwind的主题映射配置即可，完整实现步骤如下：

步骤1：在全局CSS中定义各主题变量 #

和原生CSS的写法完全一致，把所有主题的公用变量统一声明：

/* 全局CSS文件，比如global.css */
[data-theme="halloween"] {
    --color-bg: #000;
    --color-body: #757981;
    --color-primary: #ff7518;
}
[data-theme="summer"] {
    --color-bg: #f0f9ff;
    --color-body: #1e293b;
    --color-primary: #f59e0b;
}
/* winter、party等其余主题按同样格式补充即可 */

步骤2：配置tailwind.config.js关联变量 #

在Tailwind配置文件中，把需要用到的语义化颜色和上面定义的CSS变量做绑定：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        bg: 'var(--color-bg)',
        body: 'var(--color-body)',
        primary: 'var(--color-primary)',
        // 其他需要的语义化颜色都可以在这里补充
      }
    },
  }
}

步骤3：业务代码中直接使用语义化类名 #

配置完成后，就可以直接在组件中使用对应的Tailwind类，不需要写死具体色值：

<div class="bg-bg text-body">
  <button class="bg-primary text-white">提交</button>
</div>

主题切换逻辑 #

切换主题的逻辑和原生实现完全一致，直接用JS修改body的data-theme属性即可：

// 切换为万圣节主题
document.body.setAttribute('data-theme', 'halloween')
// 切换为夏日主题
document.body.setAttribute('data-theme', 'summer')

如果主题数量多、变量复杂，也可以使用社区开源的Tailwind多主题插件简化配置，不需要手动维护每个变量的映射关系。

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