Tailwind's class based dark mode in Next.JS

Tailwindcss

One of the best utility-based CSS frameworks I've ever used, period. It provides all the necessary CSS properties with values and we ourselves have to design. It's much more awesome than Bootstrap or ChakraUI as it doesn't push us to use the component structure.

Because Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it's easy to build the same component with a completely different look in the next project.

How to enable class-based dark mode for Next.Js?

In the tailwindcss docs for dark mode, it provides only a basic snippet about what to write on page load for a specific page but it doesn't provide any example or docs for the framework.

To enable class-based dark mode we first have to override the value of the darkMode key from false to 'class' in tailwind.config.js file.

1module.exports = {
2darkMode: 'class',
3// ...
4}
5

We have to edit the _app.js file to check if dark mode is applied or not before mounting the actual component to the DOM. For that, we will use useEffect from react just before returning the component.

In _app.js:

1import '../styles/globals.css';
2import { useEffect } from 'react';
3function MyApp({ Component, pageProps }) {

This will add class to html before component mounting.

light class to html

dark class to html

We also need a theme toggler button. Add our desired toggle button and we have to keep in mind that we need two buttons one for dark and one for light mode

In ThemeSwitch.jsx:

1import { useEffect, useState } from 'react';
2
3const isDark = () => //Function that will return boolean if any of the condition is satisfied
4

Now you can add the theme switch in the navbar of your layout and can change the theme on any page.

Note: Don't forget to add dark:some-value in the class names if you want manual control over CSS.