Hello Developers 👋,
Today we are going to learn how to Add DarkMode in React Using Tailwind CSS in 3 easy steps.

Step 1: Open Your Tailwind.config.js

Tailwind CSS has built-in support for dark mode. To enable it, modify the tailwind.config.js file

The darkMode configuration option determines how the dark mode variant will be activated. There are a few different options available:

1. true Dark mode is enabled globally for the entire application.

2. false Dark mode is disabled.

3. media Dark mode is activated based on the prefers-color-scheme media query. If the user's system preference is set to dark mode, the dark mode styles are applied.

4. class Dark mode is controlled by adding a class to the HTML element when dark mode is active.

darkMode: "class"

In this example, we are going to use class DarkMode

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [],
}j

Step 2: Creating Toggle Functionality

Now that we have our basic application setup, it’s time to add the functionality to toggle between light and dark themes.

We’ll start by importing the useStatehook from React at the top of our App.jsxfile. This hook allows us to add a state to our functional component.

import { useState } from "react"

Next, inside our App function, we'll declare a new state variable dark and a function setDark to update it. We'll initialize dark it to false, indicating that we start in light mode.

const [dark, setDark] = useState(false)

We’ll also create a function toggleTheme that will be called when the "Toggle Theme" button is clicked. This function will toggle the value dark between true and false, and add or remove the dark class from the body of our document.

const toggleTheme = () => {
  setDark(!dark)
  document.body.classList.toggle('dark')
}

Finally, we’ll add the onClick prop to our button, setting it to our toggleTheme function. This will ensure that toggleTheme is called whenever the button is clicked.

<button onClick={toggleTheme} >Toggle Theme</button>

Step 3: Add Styles for Dark mode

Now that we have our toggle functionality in place, let’s add some styles for our dark mode. Tailwind CSS makes this easy with its dark: variant.

First, let’s style our root div. We want the background to be white in light mode and black in dark mode. We also want the text to be black in light mode and white in dark mode.

We can achieve this with the bg-white,text-black, dark:text-white, dark:bg-black classes.

<div className="bg-white text-black dark:bg-black dark:text-white">

Similarly, you can add your styles for dark mode with tailwinds dark: variant.

Final Code:

import { useState } from "react"

function App() {

  const [dark,setDark] = useState(false)

  const toggleTheme = () => {
    setDark(!dark)
    document.body.classList.toggle('dark')
  }

  return (
    <div className="h-screen w-screen flex flex-col justify-center items-center dark:bg-black dark:text-white ">
      <h1 className="font-bold text-4xl">Dark Mode in React using Tailwind CSS</h1>
      <p className="text-lg mt-4">This is a simple example of dark mode in Tailwind CSS</p>
      <button onClick={toggleTheme} className="mt-4 px-4 py-2 dark:bg-white dark:text-black bg-black text-white rounded-md">Toggle Theme</button>
    </div>
  )
}

export default App

We have successfully DarkMode in react using tailwind CSS.

If there is any question or confusion regarding the tutorial. Feel free to ask your questions in the comments below.