Tailwind Dark Mode

Dark mode switches your site from a light background to a dark one. It reduces eye strain in low-light environments and gives your site a modern look. Tailwind makes dark mode easy to add with a single prefix: dark:.

How Dark Mode Works in Tailwind

Tailwind's dark mode works in two strategies. You choose one in your config file.

  • media strategy — follows the user's operating system setting (default)
  • class strategy — activates dark mode when you add a dark class to the <html> tag

Strategy Diagram

media strategy:
  OS is in dark mode → Tailwind applies dark: classes automatically

class strategy:
  <html class="dark"> exists → Tailwind applies dark: classes
  <html> (no dark class) → Tailwind uses light styles

Setting Up Dark Mode

Open your tailwind.config.js file. Add the darkMode key.

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Use 'class' when you want a toggle button on your site. Use 'media' when you want to automatically follow the user's system preference.

Using the dark: Prefix

Add dark: before any Tailwind class to apply it only in dark mode.

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white p-6">
  This box is white in light mode and dark gray in dark mode.
</div>

What This Looks Like

Light Mode:
+----------------------------+
|  bg-white                  |
|  text-gray-900             |
|  White background          |
+----------------------------+

Dark Mode:
+----------------------------+
|  bg-gray-900               |
|  text-white                |
|  Dark background           |
+----------------------------+

Dark Mode on Common Elements

Button

<button class="bg-blue-600 text-white dark:bg-blue-400 dark:text-gray-900 px-4 py-2 rounded">
  Click Me
</button>

Card

<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
  <h3 class="text-gray-900 dark:text-white font-bold text-lg">Card Title</h3>
  <p class="text-gray-600 dark:text-gray-300 mt-2">Card description goes here.</p>
</div>

Input Field

<input 
  type="text" 
  placeholder="Type here..."
  class="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 rounded"
/>

Full Page Dark Mode Example

<body class="bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100 min-h-screen">

  <nav class="bg-white dark:bg-gray-900 shadow px-6 py-4 flex justify-between items-center">
    <span class="font-bold text-blue-600 dark:text-blue-400 text-xl">MyApp</span>
    <button id="toggleDark" class="text-sm border px-3 py-1 rounded dark:border-gray-500">
      Toggle Dark
    </button>
  </nav>

  <main class="max-w-2xl mx-auto mt-10 px-4">
    <h1 class="text-3xl font-bold">Welcome</h1>
    <p class="mt-4 text-gray-600 dark:text-gray-400">
      This page supports both light and dark modes.
    </p>
  </main>

</body>

Adding a Dark Mode Toggle Button

When you use darkMode: 'class', you control dark mode with JavaScript. Add or remove the dark class on the <html> element.

<script>
  const toggleBtn = document.getElementById('toggleDark');

  toggleBtn.addEventListener('click', function () {
    document.documentElement.classList.toggle('dark');
  });
</script>

Toggle Flow Diagram

User clicks "Toggle Dark"
        ↓
JavaScript runs classList.toggle('dark')
        ↓
  dark class present?     dark class absent?
        ↓                         ↓
  dark: classes apply       light styles apply

Saving Dark Mode Preference

If the user picks dark mode, save their choice in localStorage. This way, the page loads in the right mode next time.

<script>
  // Apply saved preference on page load
  if (localStorage.getItem('theme') === 'dark') {
    document.documentElement.classList.add('dark');
  }

  document.getElementById('toggleDark').addEventListener('click', function () {
    const isDark = document.documentElement.classList.toggle('dark');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  });
</script>

Dark Mode Color Pairing Guide

Element         Light Class         Dark Class
-----------     ---------------     ------------------
Page bg         bg-white            dark:bg-gray-950
Section bg      bg-gray-50          dark:bg-gray-900
Card bg         bg-white            dark:bg-gray-800
Border          border-gray-200     dark:border-gray-700
Heading text    text-gray-900       dark:text-white
Body text       text-gray-600       dark:text-gray-300
Muted text      text-gray-400       dark:text-gray-500
Link            text-blue-600       dark:text-blue-400

Using dark: with Hover and Focus

You can combine dark: with other variants like hover: and focus:.

<a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-300">
  Read more
</a>

<button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded">
  Secondary Button
</button>

Dark Mode with Forms

<form class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow max-w-md mx-auto">
  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
  <input
    type="email"
    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
  />
  <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded dark:bg-blue-500 dark:hover:bg-blue-600">
    Submit
  </button>
</form>

Key Points

  • Use darkMode: 'class' in your config for manual toggle control
  • Use darkMode: 'media' to follow the OS setting automatically
  • Add dark: before any Tailwind class to apply it in dark mode only
  • Toggle dark mode by adding or removing the dark class on <html> with JavaScript
  • Save the user's preference in localStorage so it persists across page loads
  • Combine dark: with hover: and focus: for interactive elements
Previous lessons
Back to courses
Next lessons

Leave a Comment