ReactJS TaildwindCSS-darkMode始终设置为true

Question

我在React应用程序中使用TailwindCSS，并试图使用Tailwind设置暗模式，但bg已经设置为暗模式，尽管值为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>);
};

Answer 1

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

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

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