Implement Dark Mode in Tailwind React Application

1.active dark mode in tailwind.config.js

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

2. set dark mode in App.js , and pass {dark,setDark} to ,in which we set the toggle method in

function App() {
  const [dark,setDark]=useState(false);
  return (
    <div className={dark?"dark":''}>
      <Nav props={{dark,setDark}}/>
      <Routes>
        <Route path="/" element={<Home />}/>
      </Routes>
    </div>
  );
}
export default App;

3.set the toggle in the component

Nav.jsx,sun and moon are the icon you choose for it

function Nav({props}) {
  const {dark,setDark} = props
  const handleClick = ()=>{
    setDark(!dark)
  }
  return (
  <>
   <img src={dark?sun:moon} alt="toggle" className="w-5 h-5 
    absolute cursor-pointer" onClick={handleClick}/>
  </>
export default Nav;

4. add dark mode to the components ,such as About.js

function About(props) {
  console.log(skills)
  return (
    <div id='about' className=' dark:bg-gray-700 dark:text-white'>

    </div>
  );
}

export default About;