Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to Add Dark Mode in ReactJS using Tailwind CSS ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.

In this article, we’ll see how to add dark mode in the ReactJS project using Tailwind CSS. Dark mode is very popular nowadays and becoming more and more common to design a dark version of our website to go along with the default web design. To make your website use dark mode, tailwind provides a ‘dark’ variant that helps in styling our website differently when dark mode is enabled.

Step for Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: After creating the React.js application, install the Tailwind CSS using the following command.

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

Step 4: Configure template paths and add a class in a dark mode in tailwind.config.js file using the following command:

module.exports = {
      content: [
      darkMode: "class",

Step 5: Install a Sun/Moon Icon animation module for transition with React.

npm i react-toggle-dark-mode

Project Structure: It will look like the following. 


Syntax: To add the dark mode in react using tailwind, we just have to prefix dark: to the CSS classes. See the syntax below for a better understanding.

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

Example: Below example demonstrates the dark mode in React.js using tailwind CSS. In the given example, we have developed a basic card component for implementing dark mode support. Here, when the switcher component gets triggered, the whole webpage gets changed to dark/light theme. Apart from this, If the user refreshes the page, the user continues to see the last changed theme preference as it we have used local storage to save the user’s browser preference.

Steps for adding a Toggle button to toggle dark/light theme:

Step 1: Create a Hook to catch the theme changes. It also saves the last preferred mode of the user in the browser using localStorage and whenever the user visits the website again, they can continue with their last preferred mode.

useDarkSide.js file


import { useState, useEffect } from "react";
export default function useDarkSide() {
    const [theme, setTheme] = useState(localStorage.theme);
    const colorTheme = theme === "dark" ? "light" : "dark";
    useEffect(() => {
        const root = window.document.documentElement;
        localStorage.setItem('theme', theme);
    }, [theme, colorTheme]);
    return [colorTheme, setTheme]

Step 2: Create an Event (Switcher component) to trigger the theme-changing hook.

Switcher.js file


import { useState } from "react";
import { DarkModeSwitch } from "react-toggle-dark-mode";
import useDarkSide from "../hooks/useDarkSide";
export default function Switcher() {
    const [colorTheme, setTheme] = useDarkSide();
    const [darkSide, setDarkSide] = useState(
        colorTheme === "light" ? true : false
    const toggleDarkMode = (checked) => {
    return (
                style={{ marginBottom: "2rem" }}

Step 3: Add the Switcher component file to the App.js file.



import React from "react";
import Switcher from "./Components/Switcher";
function App() {
    return (
            <div style={{ textAlign: "center" }}>
                <h1 className="text-green text-3xl font-bold">
                <h3 className="text-black dark:text-white text-2xl">
                    Adding Dark Mode in ReactJS using Tailwind CSS
                <Switcher />
                <div class="w-56 overflow-hidden bg-white
                rounded-lg border border-gray-200
                shadow-md dark:bg-gray-800 dark:border-gray-700">
                    <div class="p-5">
                        <a href="##">
                            <h5 class="mb-2 text-2xl
                            font-bold tracking-tight
                            text-gray-900 dark:text-white">
                        <p class="mb-3 font-normal text-gray-700
                            Best coding website for
                            developers in the world.
export default App;

Step to run the application: 

npm start



My Personal Notes arrow_drop_up
Last Updated : 02 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials