用Tailwind CSS进行主题切换的3个步骤

让我们开始吧，我想给我的网站添加一个黑暗/白色的主题，我应该怎么做？

故事就是这样开始的，从字面上看，就是在网站上切换主题

因此，大多数网站在React中使用Tailwind CSS，所以让我们只从这个开始。

步骤1:

将主题名称附加到应用程序的根元素中。

基本上，应用程序的根 div 元素应该包含类名，当主题为暗色时为暗色，当主题为白色时为白色。

import React from "react";

const App = () => (
 

  
 Home 
 
);

export default App;

步骤2:

在本地存储中存储当前的主题。

如下面的代码例子所示，将暗色主题CSS添加到UI组件中。

import React from "react";

const App = () => {

 const theme = window.localstorage.get("theme");
 // fetch theme from localstorage


 return (
  

   
 
    // append the dark theme and work is done 
  
)};

export default App;

步骤3: 

在Tailwind配置中启用黑暗主题

进入根目录下的tailwind.config.js文件，如果没有，请创建一个同名的文件。

// append the below line or out it after purge key
darkMode: "class", // or 'media' or 'class',

这基本上会指示tailwind追加元素根部存在的给定类CSS。

如果提供了'媒体'值，Tailwind CSS将提供一个手动主题或默认的白色主题。