There are some unique hacks you need to know to succeed in creating a dark mode for your application. In this post, I will go through the process of creating dark mode for a NextJS app from start to finish.

Prequisites

Node.js - 12.22.0, v16.12.0, or higher.
MacOS, Windows (including WSL), and Linux are supported

Getting Started

It's extremely simple to add Tailwind CSS to your NextJS, so run the command and it will install all the necessary dependencies for you right away.

Installation

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

💡 Note - Via the command above, you install Tailwind CSS and the dependencies PostCSS and autoprefixer.

You can now create your tailwind.config.js file and your postcss.config.js file. Open the postcss.config.js file and include all the plugins you want to use.

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

💡 Note - I have gone and added tailwindcss and autoprefixer.

Inside the tailwind.config.js file, add the following changes.

module.exports = {
content: [
"./pages/**/*.{html,js,ts,jsx,tsx}",
"./src/**/*.{html,js,ts,jsx,tsx}",
],
theme: {
extend: { backgroundColor: {
        primary: 'var(--color-bg-primary)',
        secondary: 'var(--color-bg-secondary)',
      },
      textColor: {
        accent: 'var(--color-text-accent)',
        primary: 'var(--color-text-primary)',
        secondary: 'var(--color-text-secondary)',
      },},
},
plugins: [],
}

💡 Note - Add .light and .dark CSS classes and assign the colors for each variables.

Now open styles/globals.css and add the following tailwind directives alongside our newly created css variables.

@tailwind base;
@tailwind components;
@tailwind utilities;


.dark {
  --color-bg-primary: #000000;
  --color-bg-secondary: #283141;
  --color-text-primary: #f7fafc;
  --color-text-secondary: #e2e8f0;
  --color-text-accent: #4F46E5;
}

.light {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #edf2f7;
  --color-text-primary: #1F2937;
  --color-text-secondary: #4a5568;
  --color-text-accent: #6366F3;
}

Start up you development server by running npm run dev.

Make following changes into your pages/index.js to see if Tailwind CSS is working.

import React, { useState } from "react";
import { FaMoon, FaSun} from 'react-icons/fa/index.js';
export default function Home() {
  const [darkMode, setDarkMode] = useState(false);
  return (
    <div className={darkMode ? "dark" : ""}>
      <Head>
        <title>DarkMode</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="apple-touch-icon" href="/favicon.ico" />
      </Head>

      <main className={"bg-primary px-10 md:px-20 lg:px-40"}>
      <section className="min-h-screen">
      <nav className="py-10 mb-12 flex justify-between">
        <h1 className="font-Montserrat text-xl border-black">
           Photo Goes Here
        </h1>
        <ul className="flex items-center">
          <li>
          <button id="toggle" onClick={(e) => setDarkMode(!darkMode) }>
            { darkMode ? <FaSun color="white" className="cursor-pointer text-2xl"/>: <FaMoon className="cursor-pointer text-2xl"/> }
            </button>  
          </li>
          <li>
            <a 
              className="bg-gradient-to-r from-cyan-500 text- to-fuchsia-500 text-white font-bold px-4 py-2 border-none rounded-md ml-8"
              href="#"
              aria-label=""
            >
              Resume
            </a>
          </li>
        </ul>
      </nav>
    </section>
      </main>
    </div>
  )
}

After this you should be able see the theme change from light to darkMode.

Easy way to add Darkmode for Next JS with Tailwind CSS.

Prequisites

Getting Started