ReactJS TaildwindCSS - darkMode总是设置为true

Question

我在React应用程序中使用TailwindCSS，我试图使用Tailwind制作黑暗模式，但是bg已经被设置为黑暗，尽管值是假的。

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

};

Answer 1

您可能在tailwind.config.js中使用了错误的暗模式切换设置。默认情况下，tailwind.config.js设置为使用CSS的prefers-color-scheme。您希望在代码中手动切换暗和光模式。

设置darkMode: 'class'以便通过类名切换黑暗模式。

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