Vue 3 Dark Mode with Tailwind CSS Example

In this section, we’ll delve into implementing dark mode in Vue 3 using Tailwind CSS 3. We’ll leverage the VueUse library for enabling dark mode functionality. Before diving in, ensure you’ve installed and set up Tailwind CSS with Vue 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.

<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.