ReactJS TaildwindCSS – darkMode is always set to true

January 26, 2022

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>);

};

>Solution :

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