Implementing Dark mode in Next JS with Tailwind.
So let's jump right into it.
10 October, 2022
10
10
1
Contributors
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
💡 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.💡 Note - I have gone and added tailwindcss and autoprefixer.
Inside the
tailwind.config.js file, add the following changes.💡 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.
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.After this you should be able see the theme change from light to darkMode.
css
javascript
hacktoberfest
nextjs
tailwindcss
webdev