How to use dark mode toggle switch in Tailwind CSS 3

In this section we will see how to use dark mode in tailwind v3 with alpinejs. We will create toggle switch darkMode & light by localStorage with alpinejs. Before we start you should read How to install & setup Tailwind CSS v3 or install & setup tailwind css 3.


Tool Use

Tailwind CSS 3.x

Alpine Js 3.x


Example 1

Install tailwind 3 and enable darkMode class in tailwind.config.js.

tailwind.config.js

module.exports = {
  darkMode: 'class',
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.html

<div x-data="{'darkMode': false}" x-init="
         darkMode = JSON.parse(localStorage.getItem('darkMode'));
         $watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))">

  <div :class="{'dark': darkMode === true}">
    <div class="min-h-screen bg-white dark:bg-gray-800 dark:text-gray-100">
      <div class="flex items-center justify-center space-x-2">
        <span class="text-sm text-gray-800 dark:text-gray-500">Light</span>
        <label for="toggle"
          class="flex items-center h-5 p-1 duration-300 ease-in-out bg-gray-300 rounded-full cursor-pointer w-9 dark:bg-gray-600">
          <div
            class="w-4 h-4 duration-300 ease-in-out transform bg-white rounded-full shadow-md toggle-dot dark:translate-x-3">
          </div>
        </label>
        <span class="text-sm text-gray-400 dark:text-white">Dark</span>
        <input id="toggle" type="checkbox" class="hidden" :value="darkMode" @change="darkMode = !darkMode" />
      </div>
    </div>
  </div>
</div>


Example 2

We can also using darkmode in tailwindcss with tailwind 3 CDN with AlpineJS CDN.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Light & Dark Mode with Tailwind CSS & Alpine JS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
      tailwind.config = {
        darkMode: 'class',
        theme: {
          extend: {
            colors: {
              clifford: '#da373d',
            }
          }
        }
      }
    </script>
  </head>

  <body>

    <div x-data="{'darkMode': false}" x-init="
         darkMode = JSON.parse(localStorage.getItem('darkMode'));
         $watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))">

      <div :class="{'dark': darkMode === true}">
        <div class="min-h-screen bg-white dark:bg-gray-800 dark:text-gray-100">
          <div class="flex items-center justify-center space-x-2">
            <span class="text-sm text-gray-800 dark:text-gray-500">Light</span>
            <label for="toggle"
              class="flex items-center h-5 p-1 duration-300 ease-in-out bg-gray-300 rounded-full cursor-pointer w-9 dark:bg-gray-600">
              <div
                class="w-4 h-4 duration-300 ease-in-out transform bg-white rounded-full shadow-md toggle-dot dark:translate-x-3">
              </div>
            </label>
            <span class="text-sm text-gray-400 dark:text-white">Dark</span>
            <input id="toggle" type="checkbox" class="hidden" :value="darkMode" @change="darkMode = !darkMode" />
          </div>

        </div>
      </div>
    </div>
tailwind css light mode

tailwind css light mode

tailwind css darkmode

tailwind css darkmode