ReactJS TaildwindCSS - darkMode is always set to true-CodePudding

I'm using TailwindCSS in React app and i'm trying to make dark mode using Tailwind, but bg is already set to dark even though value is false.

import React, { useState } from 'react';

const App = () => {

    const [darkTheme, setDarkTheme] = useState(false);

    return (<div className= {darkTheme ? 'dark' : ''}>
            <div className="bg-gray-100 dark:bg-gray-900">
              App
            </div>
        </div>);

};

CodePudding user response：

You are likely using the wrong darkmode toggle setting in tailwind.config.js. By default, the tailwind.config.js is setup to use CSS's prefers-color-scheme. You want to manually toggle dark and light mode in your code.

Set darkMode: 'class' in order to toggle darkmode via your class name.

https://tailwindcss.com/docs/dark-mode