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.


<script setup>
import { useDark, useToggle } from '@vueuse/core';

const isDark = useDark();
const toggleDark = useToggle(isDark);

  <div class="flex justify-center items-center h-screen flex-col">
      class="px-4 py-2 text-white bg-gray-600 dark:bg-purple-700"
      Dark Toggle
    <div class="mt-6">
        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"
          class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
          Vue 3 dark Mode With Tailwind CSS
        <p class="font-normal text-gray-700 dark:text-gray-400">
          install & setup vue 3 dark mode in vue 3 using tailwind css 3

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