How to Add Dark Mode to Your Next.js and Tailwind CSS Project?

Dark mode has become a popular feature in modern web applications. It offers a more comfortable viewing experience in low-light environments. Implementing dark mode in your Next.js project is relatively simple, especially with the utility-first CSS framework Tailwind CSS. In this guide, you’ll walk through the process of adding dark mode on your Next.js project using Tailwind CSS.

Step 1: Configure your tailwind.config.js

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class", // Enable dark mode support with class strategy
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  ...
}

In this configuration, I set darkMode to 'class', which means dark mode will be enabled based on the presence of a dark class on the HTML element.

Step 2: Implement Dark Mode Toggle

To enable dark mode functionality, you need a way for users to toggle between light and dark modes. This can be implemented inside a toggleTheme.tsx component using React's state management.

  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const theme = localStorage.getItem("theme");
    if (theme) setTheme(theme);
    else if (window.matchMedia("(perfers-color-scheme: dark)").matches)
      setTheme("dark");
  }, []);

  useEffect(() => {
    if (theme === "dark") {
      localStorage.setItem("theme", "dark");
      document.documentElement.classList.add("dark");
    } else {
      localStorage.setItem("theme", "light");
      document.documentElement.classList.remove("dark");
    }
  }, [theme]);

Step 3: Style Your Application for Dark Mode

With the help of Tailwind CSS, applying dark mode styles is straightforward. Tailwind's dark variant allows you to easily style elements differently based on the current theme. Here is an example of a login form.

   <form action="">
      <h2 className="text-2xl font-medium text-darkBlue dark:text-white mb-5">
        Login
      </h2>
      <div className="my-3">
        <label className="text-darkBlue dark:text-gray text-sm font-medium">
          Username
        </label>
        <input
          type="text"
          name=""
          className="w-full border-b-2 border-b-darkBlue dark:border-b-white bg-white bg-opacity-0 text-darkBlue dark:text-white outline-none px-3 py-px"
        />
      </div>
      <div className="my-3">
        <label className="text-darkBlue dark:text-gray text-sm font-medium">
          Password
        </label>
        <input
          type="password"
          name=""
          className="w-full border-b-2 border-b-darkBlue dark:border-b-white bg-white bg-opacity-0 text-darkBlue dark:text-white outline-none px-3 py-px"
        />
      </div>
      <button
        type="submit"
        className="w-full bg-darkBlue dark:bg-gray text-white dark:text-darkBlue py-2 font-medium rounded mt-4"
      >
        Sign In
      </button>
    </form>

In this example, the text-darkBlue and bg-white classes are used for light mode, while the dark:text-white and dark:bg-gray classes are used for dark mode. When the dark class is present on the root element, Tailwind will apply the dark mode styles.

Conclusion

Adding dark mode to your Next.js and Tailwind CSS project is a relatively simple process that can significantly enhance the user experience. With the combination of React's context API and Tailwind's utility-first approach, you can easily manage theme states and apply dark mode styles throughout your application. You can check our video on Youtube to apply dark mode on a Nextjs project. Also download a login form project with dark mode feature from our web store.