DEV Community

Ebube Roderick
Ebube Roderick

Posted on

How to set up Tailwind CSS dark-mode React


As a web front-end developer who has ever desired to add a dark theme to your website or you have been facing difficulties in managing a theme in your website, tailwindcss makes it seem easier and faster too, and for this will be working with React.js.

At the end of this article, you should be able to set up light and dark themes on any of your React.js apps using tailwindcss with these few steps.

What is Tailwind CSS.

Tailwind CSS is a utility-first CSS framework*, t*ailwind CSS makes it quicker to write and maintain the code of your application. Using this utility-first framework, you don't have to write custom CSS to style your application. Instead, you can use utility classes to control the padding, margin, color, font, shadow, and more of your application you can visit for more information.

What is React

React is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by Facebook and a community of individual developers and companies. React allows developers to build complex UI components using a declarative syntax that makes the code easier to understand and debug.

Why Dark-mode

Theming is now in all modern design, for both Operating System (OS), Apps and websites .

It's designed to reduce eye strain in low-light conditions for those with extra sensitive to light, the dark mode reduces the bright colors for them.


To start with this tutorial, you need:

Node.js version 14 or later

Setting up a New React Project

To setup a new React.js app you need to have node installed in your system you can head to their there website to download the latest version of node in your system.

After downloading and installing node in your system, there are several ways to create a new react.js app but for this project, we will be using the create-react-app.

On your terminal, run the below command:

npx create-react-app app-name
Enter fullscreen mode Exit fullscreen mode

This will setup a new React.js application with name app-name

Next you have to navigate into the app to do that in your terminal type

cd app-name
Enter fullscreen mode Exit fullscreen mode

In your project directory to run the newly created app in your terminal type

npm i 
npm start
Enter fullscreen mode Exit fullscreen mode

Now that your app is up and runing its time to add tailwindcss to your app

Installing Tailwind CSS

****Here you have to run a simple node package command,

npm install -D tailwindcss
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

NOTE: You have to be in the current project you want to use tailwindcss.

This will install tailwindcss into your project and create a tailwind.config.js file in your project.

Setting up environmental variables

****Firstly, you will have to add all the @tailwind directives to your main index.css file and the directives are listed below.

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

And with this tailwind should be up and running in your project already but few steps to go before you can be able to use the dark theme.

Next, go to your tailwind.config.js file and add darkMode: 'class', and mode: 'jit',

So, your file should be like this:

*/** @type {import('tailwindcss').Config} */*

module.exports = {

mode: 'jit',

darkMode: 'class',

content: ["./src/**/*.{html,js,ts,jsx,tsx}"],

theme: {

extend: {},


plugins: [],

Enter fullscreen mode Exit fullscreen mode

After this save your work.

Next up go to your ‘public/index.html‘ file on the body tag(element) and add the attribute class,

Just save your file

<body *class*="">

    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div *id*="root"></div>

Enter fullscreen mode Exit fullscreen mode

With this the dark theme is ready.

The reason for adding the attribute class to the body tag(element) is that in your code the css is going to be checking if there is a name dark on the body tag(element) to be able to show or add your dark theme, we will understand it more in few seconds.

Toggling theme (Light/Dark)

with all this done you would want to be adding and removing the dark in your inspector, this is now where you will have to write some JavaScript that has to be doing that from your UI

With all that set up already let’s dive into the code

Firstly you have to check if the device is on dark to set your app theme to the device theme too and the code to do that is:

if(localStorage.theme === 'dark' || (!('theme' in localStorage) &&

window.matchMedia('(prefers-color-scheme: dark)').matches)) {


} else {


Enter fullscreen mode Exit fullscreen mode

With this on lunch of your app it automatically takes the current display theme of the device it was launched on.

Now changing the theme of your app from inside your app.

So before now, you should have created a button or a simple design to toggle the dark mode and light mode

Then create an event tired to the button that is to toggle the theme mode

Your button can be like this:

<button onClick={()=> toggleTheme()}>Click TO Toggle Theme </button>
Enter fullscreen mode Exit fullscreen mode

After this you can now create the function, it should be like this:

function toggleTheme() {

let htmlClasses = document.querySelector('html').classList;

if(localStorage.AppName === 'dark'){



localStorage.theme = 'light'


localStorage.AppName = 'dark';


localStorage.theme = 'dark'


Enter fullscreen mode Exit fullscreen mode

Your class component should like this:

Image description

Usage (How to implement)

With this done you have successfully added a theme to your app so testing it out

Create a div like this in your component:

<div className="h-44 w-44 bg-white dark:bg-black flex justify-center items-center">
        <span className="dark:hidden">light-mode</span>
        <span className="hidden dark:block text-white">dark-mode</span>
Enter fullscreen mode Exit fullscreen mode

This creates a square with the current theme state in the middle.


This is a sample output:

Image description

Image description


Adding themes to your websites makes your website stand out , and using tailwindcss makes it way more easier and flexible to implement and work with.

And using React and tailwindcss make you build more reusable component with themes making it way more easier to build app and faster too.

Top comments (0)