How to add dark mode in next.js application using tailwind css ?

Dark mode is now a trendy feature in web apps because of its stylish look and the reduced strain on the eyes it offers. Today, we'll guide you on how to add dark mode to your Next.js app with the help of Tailwind CSS Typography. This duo doesn't just improve user experience but also gives your app a more attractive appearance.

Dark mode, which improves user experience by lessening eye strain and prolonging device battery life, has become a crucial component of contemporary web development. We will show you how to use Tailwind CSS and the next-themes library to implement dark mode in a Next.js application in this detailed guide. This methodology guarantees a smooth incorporation of dark mode, emphasising the utilisation of Tailwind CSS Typography to enhance content design.

Prerequisites

Before we start, ensure you have the following installed:

• Node.js

• Next.js

• Tailwind CSS

Setting Up A Next.Js Project

First, create a new Next.js project,

npx create-next-app@latest dark-mode-nextjs
cd dark-mode-nextjs

Next, install Tailwind CSS and its dependencies,

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure Tailwind CSS by editing tailwind.config.js,

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Create the Tailwind CSS configuration file by adding the following to ./styles/globals.css,

@tailwind base;
@tailwind components;
@tailwind utilities;

To manage dark mode, we'll use the next-themes library. Install it by running:

npm install next-themes

Next, create a ThemeProvider to wrap your application. Edit pages/_app.js:

import { ThemeProvider } from 'next-themes'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

Update your Tailwind CSS configuration to support dark mode,

module.exports = {
  darkMode: 'class', // or 'media' or 'class'
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Create a button to toggle between light and dark modes. Add the following to a new file components/ThemeToggle.js,

import { useTheme } from 'next-themes'
import { useEffect, useState } from 'react'

export default function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return (
    <button
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      className="p-2 bg-gray-800 text-white rounded"
    >
      Toggle {theme === 'dark' ? 'Light' : 'Dark'}
    </button>
  )
}

Include the ThemeToggle component in your main layout or a specific page, such as pages/index.js,

import ThemeToggle from '../components/ThemeToggle'

export default function Home() {
  return (
    <div className="prose dark:prose-dark">
      <h1 className="text-3xl font-bold">Welcome to Dark Mode in Next.js</h1>
      <ThemeToggle />
      <p>This is an example of using Tailwind CSS with dark mode support in Next.js.</p>
    </div>
  )
}

Tailwind CSS Typography provides beautiful default styles for your content. To leverage this, add the prose class to your content elements. The dark:prose-dark class will apply dark mode styles when the theme is set to dark.

Here's an example of how to use it in your pages/index.js:

export default function Home() {
  return (
    <div className="prose dark:prose-dark mx-auto">
      <h1>Welcome to Dark Mode in Next.js</h1>
      <ThemeToggle />
      <p>
        This example demonstrates the integration of dark mode using Tailwind CSS and `next-themes` in a Next.js application. The content is styled using Tailwind CSS Typography.
      </p>
      <h2>Why Dark Mode?</h2>
      <p>
        Dark mode can reduce eye strain, especially in low-light environments. It also helps in saving battery life on OLED screens.
      </p>
      <h2>Setting Up Tailwind CSS</h2>
      <p>Follow the steps to configure Tailwind CSS and Tailwind CSS Typography in your Next.js project.</p>
    </div>
  )
}

Conclusion

We have gone over how to use Tailwind CSS to set up a Next.js project and how to use next-themes to implement dark mode in this article. We also showed you how to use Tailwind CSS Typography to improve content. You can improve user experience by offering a fashionable and useful dark mode in your Next.js application by following these instructions.