How to implement Dark Mode in Tailwind?

Dark mode strategies and implementation.

What You'll Learn

Dark mode strategies
Using dark: prefix
Toggle implementation

Dark Mode Prefix

index.htmlHTML

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Light and dark mode styles
</div>

Configuration Strategies

code.jsJavaScript

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
}

media: Uses system preference
class: Uses .dark class on html/body

Toggle with Class Strategy

code.jsJavaScript

// Toggle dark mode
document.documentElement.classList.toggle('dark')

// Check preference
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark')
}

React Implementation

code.txtJSX

const [dark, setDark] = useState(false)

useEffect(() => {
  document.documentElement.classList.toggle('dark', dark)
}, [dark])

How to handle Hover and Focus states?

How to customize Tailwind CSS?