Tailwind CSS Dark Mode Integration in Next.js 14

15 May 20242 min read

Implementing Dark Mode in NextJS14 with Tailwind CSS

Table of Contents

1. Create a Next.js Project:

2. Install Tailwind CSS:

3. Create Tailwind Configuration:

4. Enable Dark Mode in Tailwind Configuration:

5. Create CSS File:

6. Import CSS in layout

7. Install next-themes:

8. Create a theme-provider:

9. Create a theme-switcher component:

Implementing Dark Mode with Tailwind CSS and Next.js is straightforward. You can utilize Tailwind CSS's built-in dark mode feature along with Next.js's dynamic routing to achieve this. Here's how you can do it:

1. Create a Next.js Project:

If you haven't already, create a new Next.js project using the following command:

npx create-next-app my-next-app

2. Install Tailwind CSS:

Navigate to your project directory and install Tailwind CSS along with autoprefixer and postcss:

npm install tailwindcss postcss autoprefixer

3. Create Tailwind Configuration:

Generate a default Tailwind configuration file:

npx tailwindcss init -p

4. Enable Dark Mode in Tailwind Configuration:

In your tailwind.config.js, set the darkMode property to 'class':

1 // tailwind.config.js
2 module.exports = {
3   darkMode: "class",
4   // other configurations...
5 };

5. Create CSS File:

Create a CSS file where you'll import Tailwind CSS and define additional styles, including those for dark mode:

css

1 /* app/globals.css */
2 @import "tailwindcss/base";
3 @import "tailwindcss/components";
4 @import "tailwindcss/utilities";
5 
6 /* Define dark mode styles */
7 @media (prefers-color-scheme: dark) {
8   .dark {
9     @apply dark;
10   }
11 }

6. Import CSS in layout

1 import "./globals.css";

7. Install next-themes:

npm install next-themes

8. Create a theme-provider:

Create a theme-provider.tsx components inside the components or app folder:

1 'use client';
2 
3 import { ThemeProvider as NextThemesProvider } from 'next-themes';
4 import { type ThemeProviderProps } from 'next-themes/dist/types';
5 import { useEffect, useState } from 'react';
6 
7 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8   const [mounted, setMounted] = useState(false);
9 
10   useEffect(() => {
11     setMounted(true);
12   }, []);
13 
14   if (!mounted) {
15     return <>{children}</>;
16   }
17   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
18 }

9. Create a theme-switcher component:

1 "use client";
2 
3 import { useTheme } from "next-themes";
4 
5 const ThemeSwitcher = () => {
6   const { theme, setTheme } = useTheme();
7   return (
8     <button
9       type="button"
10       className="hs-dark-mode-active:hidden hs-dark-mode text-gray-600 hover:text-gray-500 group mr-[1em] flex items-center font-medium dark:text-white dark:hover:text-neutral-500"
11       data-hs-theme-click-value="dark"
12       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
13     >
14       {theme === "light" ? (
15         <svg
16           className="size-5 flex-shrink-0"
17           xmlns="http://www.w3.org/2000/svg"
18           width="24"
19           height="24"
20           viewBox="0 0 24 24"
21           fill="none"
22           stroke="currentColor"
23           strokeWidth="1.5"
24           strokeLinecap="round"
25           strokeLinejoin="round"
26         >
27           <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
28         </svg>
29       ) : (
30         <svg
31           className="size-5 flex-shrink-0"
32           xmlns="http://www.w3.org/2000/svg"
33           width="24"
34           height="24"
35           viewBox="0 0 24 24"
36           fill="none"
37           stroke="currentColor"
38           strokeWidth="2"
39           strokeLinecap="round"
40           strokeLinejoin="round"
41         >
42           <circle cx="12" cy="12" r="4"></circle>
43           <path d="M12 2v2"></path>
44           <path d="M12 20v2"></path>
45           <path d="m4.93 4.93 1.41 1.41"></path>
46           <path d="m17.66 17.66 1.41 1.41"></path>
47           <path d="M2 12h2"></path>
48           <path d="M20 12h2"></path>
49           <path d="m6.34 17.66-1.41 1.41"></path>
50           <path d="m19.07 4.93-1.41 1.41"></path>
51         </svg>
52       )}
53     </button>
54   );
55 };
56 export default ThemeSwitcher;

This setup will enable dark mode in your Next.js project using Tailwind CSS. You can customize the dark mode styles further based on your requirements

nextjs