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.

vue 3 light mode toggle

After click dark mode toggle button.

vue 3 darkmode toggle
saim ansari
saim ansari

I'm Saim Ansari, a full-stack developer with 4+ years of hands-on experience who thrives on building web applications that leave a lasting impression. When it comes to tech, I'm particularly adept at Laravel, React, Tailwind CSS, and the Tall Stack