TailwindCSS 是一款十分流行的 CSS 框架，其特色在于可以让你使用设定好的类名快速地生成样式而无需编写 CSS 代码。可以说，TailwindCSS 的主题色是其视觉上最重要的一部分。在许多情况下，我们需要让主题色能够根据用户的喜好而动态地切换。下面将介绍如何做到这一点。
步骤
第一步：添加所需要的颜色到 TailwindCSS 的配置文件
在 TailwindCSS 的配置文件（一般为 tailwind.config.js）里添加所需要的颜色到 theme.colors 对象中。例如，假设我们需要添加一个名为 custom 的自定义颜色，可以这样写：
-- -------------------- ---- -------
-- ------------------
-------------- - -
------ -
------- -
------- -
------- ---------
-
-
--
--------- ---
-------- ---
-第二步：创建一个可以切换主题色的容器
在 HTML 中创建一个容器元素，用于包裹需要切换主题色的组件。在这个容器元素中给定一个 ID，例如：
<div id="theme-container"> <!-- 这里是需要切换主题色的组件 --> </div>
第三步：编写 JavaScript 代码
1. 获取用于切换主题色的元素
使用以下代码获取你需要切换主题色的元素：
const themeContainer = document.getElementById('theme-container');2. 监听主题色改变事件
使用 theme-container 元素监听 theme-selector:change 事件。这个事件会在主题色发生改变的时候被触发。例如：
themeContainer.addEventListener('theme-selector:change', (event) => {
const themeName = event.detail.name;
const themeColor = event.detail.color;
// 执行主题色切换逻辑
});3. 执行主题色切换逻辑
在监听到主题色发生变化后，需要进行相应的切换操作。使用 TailwindCSS 的 @apply 常量可以为需要使用主题色的元素设置特定的类名。例如：
-- -------------------- ---- -------
----- ----------- - -
------ -
-------- ---------
---------- -----------
--
----- -
-------- ---------
---------- -----------
--
-
-------- ------------------------ -
----- - -------- --------- - - -----------------------
----- --------------------- - ----------------
----- ----------------------- - ----------------------
----- ------------------ - --------------------
-- -- ------ ---------
-------------------------------------- --------- --- --------
----------------------------
--------
----- -------- -------------- ------------ -------- -------- ------------------------ --------------------- ---------------------------
--
-
-----------------------
-------------------------------------------------------- ------- -- -
----- --------- - ------------------
-- -----------------
-------------------------
---结论
我们已经学会了如何使用上述的步骤让 TailwindCSS 的主题色动态切换。这个方法可以在大多数情况下成为实现动态主题色切换的一种基础方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f6ac9dc5c563ced58b278b