探索tailwindcss多主题切换

最新推荐文章于 2024-08-18 21:06:49 发布

明天又会在哪里

最新推荐文章于 2024-08-18 21:06:49 发布

阅读量284

点赞数 3

分类专栏： Vue3 css 文章标签：前端 vue 主题 tailwind

本文链接：https://blog.csdn.net/xuefeng11111/article/details/141291833

版权

Vue3 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

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