Step 1 - Setup “tailwind.config.js”

module.exports = {
 	...
  	darkMode: "class",
  	...
};

Step 2 - Make Changes in the header component.

import React, { useEffect, useState } from "react";

export default function Header() {
  const [theme, setTheme] = useState("");

  /* Toggle Method */
  const toggleTheme = () => {
    if (localStorage.theme == "light") {
      localStorage.setItem("theme", "dark");
      document.documentElement.classList.add("dark");
    } else {
      localStorage.setItem("theme", "light");
      document.documentElement.classList.remove("dark");
    }
    setTheme(localStorage.theme);
  };
  
  /* Set Current theme Method */
  const setCurrentTheme = () => {
    if (
      localStorage.theme === "dark" ||
      (!("theme" in localStorage) &&
        window.matchMedia("(prefers-color-scheme: dark)").matches)
    ) {
      setTheme("dark");
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  };

 /*Call setCurrentTheme when page load */
  useEffect(() => {
    setCurrentTheme();
  });
  
  return(
  	<header>
  	...
  	{/* theme toggle btn */}
  	<button className="nav-link" onClick={toggleTheme}>
    	{theme !== "dark" ? (
    	moon icon
    	) : (
      	sun icon
    	)}
  	</button>
	...
  	</header>
  )
 }