当前位置：首页 > news >正文

探索tailwindcss多主题切换

news 2025/11/26 16:53:09

现在的多主题切换基本上都是用的 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"><buttonclass="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>