In this section we will see how to use dark mode in vue 3 using tailwind css 3. For dark mode we will use VueUse library. Before start you need to install & setup tailwind css with vue 3. you can read below blog.
How to Install Tailwind CSS in Vue 3
Install Vite + Vue 3 + Typescript + Tailwind CSS 3
Install VueUse For Dark Mode
Run below command install vueuse.
npm i @vueuse/core
Add Dark Mode class in tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
Add Dark Mode using vueUse.
App.vue
<script setup>
import { useDark, useToggle } from '@vueuse/core';
const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>
<template>
<div class="flex justify-center items-center h-screen flex-col">
<button
@click="toggleDark()"
class="px-4 py-2 text-white bg-gray-600 dark:bg-purple-700"
>
Dark Toggle
</button>
<div class="mt-6">
<a
href="#"
class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
>
<h5
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
Vue 3 dark Mode With Tailwind CSS
</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">
install & setup vue 3 dark mode in vue 3 using tailwind css 3
</p>
</a>
</div>
</div>
</template>
Vue 3 before dark mode toggle button.
After click dark mode toggle button.
Read Also
How to install Bootstrap 5 in Vue 3
Vue 3 Responsive Navbar Menu With Tailwind CSS Example
Vue 3 Dropdown With Tailwind CSS Examples