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.
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.
darkMode key from false to 'class' in tailwind.config.js file.1module.exports = { 2darkMode: 'class', 3// ... 4} 5
_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.


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.