ReactJS Tailwind CSS - 黑暗模式始终设置为 true答案

【问题标题】：ReactJS TaildwindCSS - darkMode is always set to trueReactJS Tailwind CSS - 黑暗模式始终设置为 true
【发布时间】：2022-01-26 21:38:59
【问题描述】：

我在 React 应用程序中使用 TailwindCSS，我正在尝试使用 Tailwind 制作暗模式，但即使值为 false，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>);

};

【问题讨论】：

const [darkTheme, setDarkTheme] = useState(true); ?
@doğukan 这是假的，我希望它是黑暗的。

标签： reactjs tailwind-css

【解决方案1】：

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

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

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

【讨论】：

感谢它的工作。我正在看一些教程，而那个人在视频中并没有真正做到这一点，也许视频已经过时了。