How to use the dark utile with Tailwindcss and react.js
Tags: react, tailwindcss, darkmode, javascript
Published: 2022-05-29 06:52:34

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 

```javascript
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

```javascript
 <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 👇

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

```

```javascript
// 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>
```

```typescript
// 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!