Applying darkMode in Tailwind CSS

First, decide whether darkMode should follow the browser's setting, or whether you build your own button and apply it through a class state.

In tailwind.config.ts or tailwind.config.js, when the darkMode property is media it follows the browser's setting, and when it is class the user can control it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class", // with media, darkMode follows the browser's setting
  plugins: [],
};
export default config;

If you want to manage darkMode through class, separately from the browser's setting,

I think you can manage it at the very top, that is, in the rootComponent.

Below is temporary code for applying it in Next.js.

jsx

1
2
3
4
5
6
7
8
9
10
11
12import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { useState } from "react";

export default function App({ Component, pageProps }: AppProps) {
  const [dark, setDark] = useState(false);
  return (
    <div className={dark ? "dark" : ""}>
      <Component {...pageProps} />
    </div>
  );
}

I think applying it something like this should work.

Applying darkMode in Tailwind CSS

More in Tech notes