Dark Mode in Tailwind

Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled.

Configuration

Enable dark mode in tailwind.config.js:

javascript

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

Using Dark Mode

html

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  This adapts to dark mode!
</div>

Toggle Dark Mode

javascript

// Add/remove class on html element
document.documentElement.classList.toggle('dark')

Common Patterns

html

<div class="
  bg-white dark:bg-slate-800
  text-slate-900 dark:text-white
  border border-slate-200 dark:border-slate-700
  shadow-lg dark:shadow-slate-900/50
">
  Card with dark mode support
</div>

System Preference

javascript

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