vue 3 dark mode with tailwind css example

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.


vue 3 light mode toggle switch with tailwind

After click dark mode toggle button.

vue 3 darkmode toggle switch with tailwind css v3



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

Tailwind CSS Vue 3 Table Example

Tailwind CSS Vue 3 Modal Examples