tailwind.config.js#
export default {
darkMode: "class",
...
};
App.vue#
<template>
<div :class="{ dark: isdark }">
<div
class="w-screen h-screen bg-white dark:bg-gray-800 transform transition-all duration-300"
>
<button @click="isdark = true">深色模式</button>
<button @click="isdark = false">浅色模式</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const isdark = ref(false);
</script>