如何在ReactJS中使用Tailwind CSS添加暗黑模式

Tailwind CSS 是一个帮助构建快速自定义UI的CSS框架。它是一个高度可定制的低级CSS框架，为您提供所需的所有构建模块。Tailwind CSS使用一组定义的选项创建小型实用程序，可将现有类直接集成到HTML代码中。

先决条件

React JS
Tailwind CSS

方法

要在ReactJS中使用Tailwind CSS添加暗黑模式，我们将在应用程序中使用tailwind类。 Tailwind提供了一个 “dark” 变体，当启用暗黑模式时，可以帮助我们以不同的样式设计我们的网站。它添加了在浅色模式和暗黑模式之间切换的功能。

创建React应用程序

步骤1： 使用以下命令创建一个React应用程序：

npm create-react-app appname

步骤2： 在创建项目文件夹（即文件夹名称）之后，使用以下命令进入它：

cd foldername

步骤3 : 在创建 React.js 应用之后，使用以下命令安装 Tailwind CSS。

npm i -D tailwindcss postcss autoprefixer  
npx tailwindcss init -p

步骤4： 在 tailwind.config.js 文件中配置模板路径，并使用以下命令添加暗黑模式的类：

module.exports = {  
      content: [  
        "./src/**/*.{js,jsx,ts,tsx}",  
      ],  
      darkMode: "class",  
}

步骤5： 使用React安装一个用于过渡的太阳/月亮图标动画模块。

npm i react-toggle-dark-mode

项目结构

项目结构将如下所示。

如何在ReactJS中使用Tailwind CSS添加暗黑模式

安装所需模块后的更新的依赖项列表

{  
    "dependencies": {  
        "@testing-library/jest-dom": "^5.17.0",  
        "@testing-library/react": "^13.4.0",  
        "@testing-library/user-event": "^13.5.0",  
        "react": "^18.2.0",  
        "react-dom": "^18.2.0",  
        "react-scripts": "5.0.1",  
        "react-toggle-dark-mode": "^1.1.1",  
        "web-vitals": "^2.1.4"  
    },  
    "devDependencies": {  
        "autoprefixer": "^10.4.16",  
        "postcss": "^8.4.31",  
        "tailwindcss": "^3.3.5"  
    }  
}

示例： 这个示例演示了当按钮被点击时启用的深色模式。这个数据被存储在本地存储中，以存储用户对Web应用主题的偏好。

// Filename - App.js
 
import React from "react";
import Switcher from "./Components/Switcher";
 
function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h1 className="text-green text-3xl font-bold">
                    GeeksforGeeks
                </h1>
                <h3 className="text-black dark:text-white text-2xl">
                    Adding Dark Mode in ReactJS using
                    Tailwind CSS
                </h3>
            </div>
            <center>
                <Switcher />
                <div
                    className="w-56 overflow-hidden bg-white
                rounded-lg border border-gray-200 
                shadow-md dark:bg-gray-800 dark:border-gray-700"
                >
                    <img
                        className="rounded-t-lg"
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                        alt="gfg"
                    />
                    <div className="p-5">
                        <a href="##">
                            <h5
                                className="mb-2 text-2xl 
                            font-bold tracking-tight 
                            text-gray-900 dark:text-white"
                            >
                                GeeksforGeeks
                            </h5>
                        </a>
                        <p
                            className="mb-3 font-normal text-gray-700 
                            dark:text-gray-400"
                        >
                            Best coding website for
                            developers in the world.
                        </p>
                    </div>
                </div>
            </center>
        </div>
    );
}
 
export default App;

// Filename - Components/Switcher.js
 
import { useState } from "react";
import { DarkModeSwitch } from "react-toggle-dark-mode";
import useDarkSide from "../hooks/useDarkSide";
 
export default function Switcher() {
    const [colorTheme, setTheme] = useDarkSide();
    const [darkSide, setDarkSide] = useState(
        colorTheme === "light" ? true : false
    );
 
    const toggleDarkMode = (checked) => {
        setTheme(colorTheme);
        setDarkSide(checked);
    };
 
    return (
        <>
            <DarkModeSwitch
                style={{ marginBottom: "2rem" }}
                checked={darkSide}
                onChange={toggleDarkMode}
                size={30}
            />
        </>
    );
}

// Filename - hooks/useDarkSide.js
 
import { useState, useEffect } from "react";
 
export default function useDarkSide() {
    const [theme, setTheme] = useState(localStorage.theme);
    const colorTheme = theme === "dark" ? "light" : "dark";
    localStorage.setItem("theme", theme);
    useEffect(() => {
        const root = window.document.documentElement;
        root.classList.remove(colorTheme);
        root.classList.add(theme);
        if (localStorage.theme == "dark")
            localStorage.removeItem("theme");
        else localStorage.setItem("theme", theme);
    }, [theme, colorTheme]);
 
    return [colorTheme, setTheme];
}

运行应用程序的步骤： 在项目目录中的终端使用以下命令。