How to Add Dark Mode in ReactJS using Tailwind CSS ?
Last Updated :
23 May, 2024
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.
Prerequisites:
Approach:
To Add Dark Mode in ReactJS using Tailwind CSS we will be using tailwind classes in the application. Tailwind provides a 'dark' variant that helps in styling our website differently when dark mode is enabled. It adds the functionality to switch between light and dark modes.
Creating React Application
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 i -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: [
"./src/**/*.{js,jsx,ts,tsx}",
],
darkMode: "class",
}
Step 5: Install a Sun/Moon Icon animation module for transition with React.
npm i react-toggle-dark-mode
Project Structure
Project Structure will look like the following.

The Updated list of dependencies after installing required modules
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-toggle-dark-mode": "^1.1.1",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5"
}
}
Example: This example demonstrate the dark mode which is enabled when the button is clicked. This data is stored in the localStorage to store the user preference of web app theme.
JavaScript
// Filename - App.js
import React from "react";
import Switcher from "./Components/Switcher";
function App() {
return (
<div>
<div style={{ textAlign: "center" }}>
<h1 className="text-green text-3xl font-bold">
GeeksforGeeks
</h1>
<h3 className="text-black dark:text-white text-2xl">
Adding Dark Mode in ReactJS using
Tailwind CSS
</h3>
</div>
<center>
<Switcher />
<div
className="w-56 overflow-hidden bg-white
rounded-lg border border-gray-200
shadow-md dark:bg-gray-800 dark:border-gray-700"
>
<img
className="rounded-t-lg"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
alt="gfg"
/>
<div className="p-5">
<a href="##">
<h5
className="mb-2 text-2xl
font-bold tracking-tight
text-gray-900 dark:text-white"
>
GeeksforGeeks
</h5>
</a>
<p
className="mb-3 font-normal text-gray-700
dark:text-gray-400"
>
Best coding website for
developers in the world.
</p>
</div>
</div>
</center>
</div>
);
}
export default App;
JavaScript
// Filename - Components/Switcher.js
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) => {
setTheme(colorTheme);
setDarkSide(checked);
};
return (
<>
<DarkModeSwitch
style={{ marginBottom: "2rem" }}
checked={darkSide}
onChange={toggleDarkMode}
size={30}
/>
</>
);
}
JavaScript
// Filename - hooks/useDarkSide.js
import { useState, useEffect } from "react";
export default function useDarkSide() {
const [theme, setTheme] = useState(localStorage.theme);
const colorTheme = theme === "dark" ? "light" : "dark";
localStorage.setItem("theme", theme);
useEffect(() => {
const root = window.document.documentElement;
root.classList.remove(colorTheme);
root.classList.add(theme);
if (localStorage.theme == "dark")
localStorage.removeItem("theme");
else localStorage.setItem("theme", theme);
}, [theme, colorTheme]);
return [colorTheme, setTheme];
}
Step to run the application: Use this command in the terminal inside the project directory.
npm start
Output: This output will be visible on the http://localhost:3000/ on the browser window.
Similar Reads
JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
Web Development Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De
5 min read
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
JavaScript Interview Questions and Answers JavaScript is the most used programming language for developing websites, web servers, mobile applications, and many other platforms. In Both Front-end and Back-end Interviews, JavaScript was asked, and its difficulty depends upon the on your profile and company. Here, we compiled 70+ JS Interview q
15+ min read
Decorators in Python In Python, decorators are a powerful and flexible way to modify or extend the behavior of functions or methods, without changing their actual code. A decorator is essentially a function that takes another function as an argument and returns a new function with enhanced functionality. Decorators are
10 min read
AVL Tree Data Structure An AVL tree defined as a self-balancing Binary Search Tree (BST) where the difference between heights of left and right subtrees for any node cannot be more than one. Balance Factor = left subtree height - right subtree heightFor a Balanced Tree(for every node): -1 ⤠Balance Factor ⤠1Example of an
4 min read
Domain Name System (DNS) DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w
8 min read
What is a Neural Network? Neural networks are machine learning models that mimic the complex functions of the human brain. These models consist of interconnected nodes or neurons that process data, learn patterns and enable tasks such as pattern recognition and decision-making.In this article, we will explore the fundamental
12 min read
HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML
14 min read