HTML

How to Add Dark Mode with Tailwind CSS v4

Written by Jane Doe on Jun 3, 2025

How to Add Dark Mode with Tailwind CSS v4
Dark mode toggle example with Tailwind CSS

A beginner-friendly guide to implementing dark mode in your website using Tailwind CSS version 4, complete with a toggle button.

Dark mode is a must-have feature for modern websites. It’s easier on the eyes and makes your site look sleek. With Tailwind CSS version 4, adding dark mode is super simple! In this guide, I’ll teach you, step-by-step, how to set it up and add a toggle button, as if we’re coding together for the first time.

What You’ll Need

  • A project with Tailwind CSS v4 installed. Not sure how? Check the Tailwind CSS installation guide.
  • Basic knowledge of HTML, CSS, and JavaScript (don’t worry, I’ll explain everything clearly).
  • A code editor like VS Code and a browser to test your work.

Let’s get started!

Step 1: Enable Dark Mode

First, we need to tell Tailwind to support dark mode. Open your tailwind.config.js file (this is where we configure Tailwind). Add the darkMode: 'class' option, like this:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
  darkMode: "class", // Activates dark mode with a class
};

What’s this doing? The darkMode: 'class' setting means Tailwind will apply dark mode styles when a dark class is added to the <html> tag. It’s like giving your website a “dark mode switch” we can flip on or off.

Step 2: Style for Light and Dark Modes

Now, let’s style your website to change colors in dark mode. Tailwind uses a dark: prefix to apply styles only when dark mode is active. Here’s an example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dark Mode Demo</title>
    <link href="/path/to/tailwind.css" rel="stylesheet" />
  </head>
  <body class="bg-white dark:bg-gray-800 text-black dark:text-white">
    <h1 class="text-2xl font-bold">Hello, Dark Mode!</h1>
    <p>This text flips colors in dark mode.</p>
  </body>
</html>

Let’s break it down:

  • bg-white makes the background white in light mode.
  • dark:bg-gray-800 switches it to dark gray in dark mode.
  • text-black sets black text for light mode, and dark:text-white makes it white in dark mode.

Try it: Add the dark class to the <html> tag (e.g., <html class="dark">) and refresh your browser. The background and text will change to the dark mode styles!

Step 3: Add a Toggle Button

Let’s make it interactive by adding a button to switch between light and dark modes. We’ll use JavaScript to toggle the dark class and save the user’s choice.

Here’s the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dark Mode Demo</title>
    <link href="/path/to/tailwind.css" rel="stylesheet" />
  </head>
  <body class="bg-white dark:bg-gray-800 text-black dark:text-white">
    <div class="p-6">
      <h1 class="text-2xl font-bold">Hello, Dark Mode!</h1>
      <button
        id="toggle-theme"
        class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
      >
        Toggle Theme
      </button>
      <p class="mt-4">Click the button to switch themes!</p>
    </div>


    <script>
      const button = document.getElementById("toggle-theme");
      button.addEventListener("click", () => {
        document.documentElement.classList.toggle("dark");
        // Save the theme choice
        const isDark = document.documentElement.classList.contains("dark");
        localStorage.setItem("theme", isDark ? "dark" : "light");
      });


      // Load saved theme on page load
      if (localStorage.getItem("theme") === "dark") {
        document.documentElement.classList.add("dark");
      }
    </script>
  </body>
</html>

What’s happening?

  • The button is styled with Tailwind classes (e.g., bg-blue-600 for light mode, dark:bg-blue-500 for dark mode).
  • When clicked, the JavaScript toggles the dark class on the <html> tag, switching themes.
  • We use localStorage to save the user’s choice, so the theme persists when they revisit the page.
  • On page load, we check localStorage and apply the dark class if the user previously chose dark mode.

Test it: Click the button in your browser, and watch the theme flip. Refresh the page—it remembers your choice!

Step 4: Bonus Tips

Here’s how to make your dark mode even better:

  • Check Readability: Ensure text is clear in both modes. Use a contrast checker to confirm.
  • Add Custom Colors: In tailwind.config.js, you can define your own colors for dark mode to match your brand.
  • Test on Devices: Try your site on your phone or tablet to ensure it looks great everywhere.

Wrapping Up

You’ve just learned how to add dark mode to your website with Tailwind CSS v4! We set up the config, styled for light and dark modes, and added a toggle button that saves the user’s choice. It’s like giving your site a light switch for themes.

Want to explore more? Check the Tailwind CSS dark mode docs for advanced tricks. Now, go play with your code and make it your own!

Happy coding!