Overview
This article explains how to add dark mode using Tailwind CSS V4 with Next.js 15 App Router.
The following article was helpful as a reference.
https://sujalvanjare.vercel.app/blog/dark-mode-nextjs15-tailwind-v4
As shown below, it was possible to switch between dark mode and light mode.
The following is a Japanese article about the above reference, generated by ChatGPT.
Learn how to implement dark mode and light mode in a Next.js 15 App Router project using Tailwind CSS V4. This step-by-step guide covers the latest changes in Tailwind V4 and Next.js 15 for achieving a seamless theme switcher!
If you already have a Next.js project, proceed to Step 1.
Step 1: Create a New Next.js Project
To install Next.js 15 with App Router and Tailwind CSS v4, follow these steps:
- Create a project folder in any location.
- Open the folder in VS Code.
- Open the terminal and run the following command:
For npm users:
For pnpm users:
During installation, you will see the following options:
Use the arrow keys to select options and press Enter. Make sure to enable Tailwind CSS and App Router.
By default, Next.js installs Tailwind CSS v3. To upgrade, proceed to the next section.
Step 2: Upgrade to Tailwind CSS v4
To upgrade Tailwind CSS to v4, run the following command in the terminal:
For npm users:
For pnpm users:
If you encounter errors, try a force upgrade:
This will automatically update the PostCSS configuration and replace old Tailwind CSS classes.
For more details, check the official upgrade guide.
Step 3: Manually Install Tailwind CSS v4 (If Upgrade Failed)
If the upgrade failed, run the following commands to manually install Tailwind CSS v4:
For pnpm:
Update postcss.config.mjs or postcss.config.js
Replace the contents with the following:
Modify the Global CSS File
Remove the old Tailwind imports:
0
And replace them with:
1
For more details, see How to Install Tailwind CSS in Next.js.
Step 4: Enable Dark Mode in Tailwind CSS v4
Why Doesn’t the dark Class Work?
In Tailwind CSS v4, the tailwind.config.js file has been removed, and the darkMode: "class" setting no longer exists. This means you need to enable dark mode directly in the global CSS file.
Solution:
Add the following to your global CSS file:
2
This will detect the .dark class and apply the correct dark mode styles.
Step 5: Add a Dark Mode Toggle Button
Install next-themes
To easily toggle dark mode, install the next-themes package:
For npm:
3
For pnpm:
4
Create a Theme Provider Component
- Create a new folder called theme inside the src folder.
- Inside the theme folder, create a file named theme-provider.jsx (or .tsx for TypeScript).
- Add the following code:
For .jsx files:
5
For .tsx files (if using TypeScript):
6
Add the Theme Provider to the Root Layout
Open the layout.jsx or layout.tsx file (usually in the root folder) and modify it as follows:
For .jsx files:
7
For .tsx files (if using TypeScript):
8
Warning: Make sure to import the ThemeProvider component you created, not the one from next-theme.
Warning: Don’t forget to add the suppressHydrationWarning attribute to the <html> tag to prevent React hydration errors when switching themes.
Theme Provider Props explanation:
defaultTheme="system": Matches the default theme to the system theme.enableSystem: Allows automatic switching between dark and light modes based on the user’s system settings.disableTransitionOnChange: Disables all CSS transitions to ensure a flicker-free experience when switching themes.
Create a Dark Mode and Light Mode Toggle Button
- Create theme-toggle.jsx (or .tsx for TypeScript) inside the theme folder.
- Add the following code:
9
Add the Toggle Button to the Navigation Bar
Integrate the ThemeToggle component into your navigation bar or any desired location:
0
Update the Home Page
Paste the following code into your home page:
1
Common Ways to Add Dark Mode Styles
There are two common ways to apply dark mode styles with Tailwind CSS:
1. Using the dark: Class
Tailwind CSS provides a dark: variant that allows you to apply styles when dark mode is active.
For example:
2
Here, the bg-white, dark:bg-[#191919], text-[#37352f], and dark:text-[#ffffffcf] classes ensure that the background color and text color automatically adapt when dark mode is enabled.
2. Using CSS Variables
Instead of adding dark: classes everywhere, you can define theme-specific variables in global.css and use them throughout your styles.
For example:
3
By using CSS variables to define custom properties for shadows, text, background, and border colors, we extended Tailwind’s color system. These variables are set in :root for light mode and updated within .dark for dark mode.
Now you can use them in components like this:
4
Since the variable values change based on the theme, styles are automatically updated without needing dark: classes everywhere.
Updated Files for Next.js Dark Mode
5
Step 6: Start the Development Server and Test
For npm users:
6
For pnpm users:
7
Access localhost and use the button to switch between dark mode and light mode. Verify that the theme persists across pages and correctly follows the system theme on initial load.
Congratulations! You have successfully implemented seamless dark mode and light mode switching with Next.js 15 and Tailwind CSS v4.