Tailwind CSS 下，如何自定义样式的颜色？
Tailwind CSS 是目前很火的一款 CSS 框架，它以配置化的方式提供了大量的 CSS 样式类，使得开发者可以更快速、便捷地编写样式。不过，有时候我们需要在样式中添加一些自定义颜色，这时该怎么做呢？
首先，让我们来看一下 Tailwind CSS 提供的默认颜色：
从上图可以看出，Tailwind CSS 默认提供了一组基本颜色，包括灰色阴影和特殊背景色。但是有时候我们希望在这些基本颜色之外再添加一些自定义的颜色，该怎么办呢？
一，Tailwind CSS 自定义颜色
Tailwind CSS 提供了两种方式自定义颜色：使用自定义配置文件和使用 CSS 变量。
- 自定义配置文件
Tailwind CSS 允许你覆盖基本配置文件中的颜色，具体来说，你可以修改 tailwind.config.js 文件中的 theme 属性，如下所示：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
------- -
------- ---------- -- -----
--
--
--
--------- ---
-------- ---
--在这个配置文件中，我们把自定义颜色命名为 custom，并设置它的值为 #a245ff。你也可以使用 RGB、RGBA、HSL、HSLA 等其他颜色表示方式。
修改完配置文件后，你可以在 HTML 中使用 Tailwind CSS 提供的样式类来调用自定义颜色，如下所示：
<div class="bg-custom"></div>
这里，我们使用 bg-custom 样式类来设置背景色为自定义颜色，即 #a245ff。
当然，如果你想批量自定义一组颜色，你可以定义一个对应颜色的配置项：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
------- -
------- -
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
--
--
--
--
--------- ---
-------- ---
--这样，你就可以像使用默认颜色一样使用自定义颜色：
<div class="bg-custom-500"></div>
这里，我们使用 bg-custom-500 样式类来设置背景色为自定义颜色的第 5 种值，即 f455da。
- CSS 变量
如果你正在使用支持自定义属性的浏览器，比如 Chrome 和 Safari，你也可以使用 CSS 变量定义自定义颜色：
:root {
--custom-color: #a245ff;
}
.bg-custom {
background-color: var(--custom-color);
}这里，我们使用 :root 伪类来定义一个 CSS 变量 --custom-color，并设置它的值为 #a245ff。然后在样式类 bg-custom 中使用 var() 函数来引用该变量，即可实现使用自定义颜色。
二，总结
Tailwind CSS 提供了两种方式自定义颜色: 使用自定义配置文件和使用 CSS 变量。从以上介绍可以看出，使用 Tailwind CSS 自定义颜色十分方便和灵活，能够满足开发者在开发过程中自定义颜色的需求，提高工作效率和开发体验。
最后，附上一个使用自定义颜色的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
----------------------
-----
----------------
----------------------------------------------------------------------------
--
-------
----- -
--------------- --------
-
---------- -
----------------- --------------------
-
--------
-------
------
---- ------------------ --- ---------- -------------
--- --------------- --------------------
-------- ----- ----- --- ----- ----------- ---------- --------
---- ----------- ---- ---- ------- -----------------
------
-------
-------在这个示例中，我们使用了 Tailwind CSS 默认颜色类 bg-blue-500 来设置页面的背景色，然后使用 bg-custom 样式类来设置一个自定义颜色的背景色，即 #a245ff。同时，我们也使用了 CSS 变量来定义自定义颜色，这样在后续的开发中调整颜色时更加方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494035048841e989418fe01