---
title: "Discussion on \"Add Dark mode in Nextjs App using Tailwind CSS Dark Mode.\" | Hashnode"
description: "Discussion on \"Add Dark mode in Nextjs App using Tailwind CSS Dark Mode.\". Today, we are going to discuss how we can add dark mode in Next.js App using Tailwind CSS dark mode in just 5 easy steps."
url: "https://hashnode.com/posts/add-dark-mode-in-nextjs-app-using-tailwind-css-dark-mode/629d7e7ecfa70a3fd32d916e"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Add Dark mode in Nextjs App using Tailwind CSS Dark Mode.](https://nextjsdev.hashnode.dev/add-dark-mode-in-nextjs-app-using-tailwind-css-dark-mode?utm_source=hashnode&utm_medium=feed)

Today, we are going to discuss how we can add dark mode in Next.js App using Tailwind CSS dark mode in just 5 easy steps.

Jun 6, 2022 · 7 min read · nextjsdev.hashnode.dev  
Read the article

-   [#nextjs](https://hashnode.com/tag/nextjs)
-   [#tailwind-css](https://hashnode.com/tag/tailwind-css)

## Written by

[Vikas Rai](https://hashnode.com/@raivikas200)

@raivikas200 · New Delhi ,India

  
[View profile](https://hashnode.com/@raivikas200)

Learn -> Practice -> Apply -> Build -> Repeat

Vikas Rai is a college student studying at Maharaja Agrasen Institute of Technology, currently pursuing B.Tech (Graduation) in Electrical & Electronics and Engineering.Web development enthusiast & Next.js Lover. Personal Blog @ nextjsdev.com

## Responses 1

Markdown supported · ⌘↵ to post

[James Carly](https://hashnode.com/@CarlyJames)

[Jan 10, 2023](https://hashnode.com/posts/add-dark-mode-in-nextjs-app-using-tailwind-css-dark-mode/629d7e7ecfa70a3fd32d916e/comment/63bd825ba02a7de436a2ef5f)

Please help me. only background color is changing to the dark/light mode

[Vikas Rai](https://hashnode.com/@raivikas200)

[Jan 11, 2023](https://hashnode.com/posts/add-dark-mode-in-nextjs-app-using-tailwind-css-dark-mode/629d7e7ecfa70a3fd32d916e/comment/63bd825ba02a7de436a2ef5f#reply-63beaafd15f96df585382f6b)

Are you using tailwind css in your project with nextjs??

If Yes, then please check the below things:

1.  Check \_app.js file, whether you have imported the ThemeProvider or not.
    
2.  You have to add a Key value pair , the tailwindc.config.js, which is darkMode:"class" and also be sure that you have added path for all the pages inside the content filed of the tailwindcss like this
    

content: \[ "./pages/**/\*.{js,ts,jsx,tsx}", "./components/**/\*.{js,ts,jsx,tsx}", \],

darkMode:"class",

1.  Have you actually added the code for the dark mode to work. I mean to say that we have to individually add the dark calss to each element. Like this:

<div className="bg-gray-50 dark:bg-gray-900"> <p className="text-lg text-gray-900 dark:text-gray- 100"> This is a text. </p> </div>

Check all these , solutions, if it helps

[James Carly](https://hashnode.com/@CarlyJames)

[Jan 11, 2023](https://hashnode.com/posts/add-dark-mode-in-nextjs-app-using-tailwind-css-dark-mode/629d7e7ecfa70a3fd32d916e/comment/63bd825ba02a7de436a2ef5f#reply-63beb0b315f96df5853831a8)

It worked, Thanks so much.

Next am trying to change the background image just like the way background color changes, in this case should be background image changing, please help me.

[Vikas Rai](https://hashnode.com/@raivikas200)

[Mar 12, 2023](https://hashnode.com/posts/add-dark-mode-in-nextjs-app-using-tailwind-css-dark-mode/629d7e7ecfa70a3fd32d916e/comment/63bd825ba02a7de436a2ef5f#reply-640d3a5515cd01486d226bb1)

Sorry, but I don't know much about this particular thing.