Theme toggle using Tailwind CSS in just 3 steps

Tailwind literally makes it a cakewalk

Dark/white theme -> https://tailwind-css-theme-toggle-demo.vercel.app/

Under the Hood

Let's begin, I want to add a dark/white theme to my website what should I do?

That is how the story begins literally theme toggle on the website

So most of the websites use Tailwind CSS in React so let’s begin with that only.

Step 1

Append the theme classname to the root element of the application.

Basically, the root div element of the application should contain the classname as the dark when a theme is dark and white when a theme is white.

import React from "react";

const App = () => (
 <div classname={`${theme}`}>
  <div> Home </div>
 </div>
);

export default App;

Step 2

Store the current theme in local storage.

Add the dark theme CSS to the UI components as shown in the code example below.

import React from "react";

const App = () => {

 const theme = window.localstorage.get("theme");
 // fetch theme from localstorage


 return (
  <div classname={`${theme}`}>
   <div> <button className="dark:bg-gray-800 bg-gray-100"></button></div>
    // append the dark theme and work is done 
  </div>
)};

export default…