现在的多主题切换基本上都是用的 css 变量的形式, 而tailwindcss也支持 css 变量定义主题的方式
至于为什么用 tailwind+css变量, 还是因为 tailwind 写类名提示比较方便, 也不需要再在css或者style中去一个个var的形式去写变量了

这里我在assets/style/theme文件夹中创建了三个文件

这里只定义了一个 css 变量 --color-primary

当然, 这里有三种定义方式, 具体参见 tailwind 官方文档: using-css-variables

我这里定义css变量的形式使用的是, 第三种 rgba 的方式

接下来将 index.css 文件导入到 style.css 或者 main.ts 中

然后再 tailwind.config.js中添加 colors 字段

后面的 <alpha-value> 是用来指定透明度的, 如果你的颜色不需要透明度, 也可以去掉

然后我们就可以在项目中使用这个颜色了

<template>
  <div :class="theme">
    <div class="h-40 flex items-center justify-center text-3xl bg-primary/20">
      app
    </div>
    <div class="flex items-start justify-center">
      <button
        class="h-10 px-4 mt-4 bg-gray-600 rounded-md text-white hover:bg-gray-700"
        @click="handleClick"
      >
        点击切换主题
      </button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";

type Theme = "blue" | "green";

const theme = ref<Theme>("blue");

function handleClick() {
  theme.value = theme.value === "blue" ? "green" : "blue";
}
</script>
<style scoped lang="scss"></style>