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/[email protected]/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 darkmode
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
