How to use the dark utile with Tailwindcss and react.js

Mustafa Zahedi — Sun, 29 May 2022 06:52:34 +0000

In this discuss we will learn how to use the dark: utile with tailwindcss and react.js projects by an easy way.

let's start with an empty create-react-app, at first we should add
darkMode: "class"
in tailwind.config.js in module.exports after that we should add class="light"
attribute in
<html lang="en" class="light">...</html>
tag in index.html file in public folder after that we should add
class="bg-white text-black"
attribute in
<body class="bg-white text-black">...</body>
tag in index.html file in public folder and just one more step is remained to finish everything ant it is the toggle button to change the light to dark and dark to light for this you can add this piece of code every where of your project for example I added it in my App.tsx file

function toggleMode() {
    const dd = document.documentElement;
    const body = document.body;

    if (dd.className === "dark") {
      dd.classList.replace("dark", "light");
      body?.classList.replace("bg-slate-800", "bg-gray-100");
      body?.classList.replace("text-white", "text-black");
    } else {
      dd.classList.replace("light", "dark");
      body?.classList.replace("bg-gray-100", "bg-slate-800");
      body?.classList.replace("text-black", "text-white");
    }
  }

and a button you need to handle this toggle

 <button className="h-7 w-10 rounded" onClick={toggleMode}>
          Theme
 </button>

if this was not clear enough for you, there is no problem you can check all the code below 👇

// tailwind.config.js
module.exports = {
  darkMode: "class",
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

// index.html
<!DOCTYPE html>
<html lang="en" class="light">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body class="bg-white text-black">
    <div id="root"></div>
  </body>
</html>

// App.tsx

import React from "react";

export default function App() {
  function toggleMode() {
    const dd = document.documentElement;
    const body = document.body;

    if (dd.className === "dark") {
      dd.classList.replace("dark", "light");
      body?.classList.replace("bg-black", "bg-white");
      body?.classList.replace("text-white", "text-black");
    } else {
      dd.classList.replace("light", "dark");
      body?.classList.replace("bg-white", "bg-black");
      body?.classList.replace("text-black", "text-white");
    }
  }
  return (
    <div className="">
      <nav>
        <button className="p-2 rounded bg-slate-500 " onClick={toggleMode}>
          Theme
        </button>
      </nav>
      <article className="dark:bg-green-700">
        <h1>Hey, I'm Mostapha a programmer and web developer</h1>
      </article>
    </div>
  );
}

Although it is not the best way but in my opinion it is the easiest way.
thank you for reading, I would be appreciate for your feedbacks!

DEV Community: Mustafa Zahedi

How to use the dark utile with Tailwindcss and react.js