Add Dark mode in Nextjs App using Tailwind CSS Dark Mode.

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

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.

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