Easy way to add Darkmode for Next JS with Tailwind CSS.
Tags: javascript, css, tailwindcss, nextjs
Published: 2022-10-09 14:27:19

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](https://nextjs.org/) app from start to finish. 

## Prequisites

- Node.js - 12.22.0, v16.12.0, or [higher](https://nodejs.org/en/).
- 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.


![DarkMode.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m5n3n8rzvsy77fe06z9.gif)