TailwindCSS 是一个流行的 CSS 框架，它提供了许多实用的工具类，能够快速开发出美观的响应式网页，而且非常容易定制。
在 TailwindCSS 中，我们可以使用预定义的颜色来设置背景颜色、文本颜色等等。但如果我们需要使用自定义颜色，该怎么做呢？接下来，我将详细介绍 TailwindCSS 添加自定义颜色的方法。
添加自定义颜色
首先，我们需要在 tailwind.config.js 文件中添加自定义颜色。打开该文件，找到 theme 属性，并在其中添加 extend 属性，如下所示：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
------- -
---------- ----------
------------ ----------
-
-
--
-在 colors 属性中，我们添加了 primary 和 secondary 两个颜色映射，分别代表了深蓝色和浅灰色。这两个颜色在后续的开发中可以直接使用。
需要注意的是，自定义颜色需要以字符串形式添加，且颜色值需要使用十六进制代码。
使用自定义颜色
添加了自定义颜色，我们就可以在 HTML 中使用它们了。比如，我们可以设置背景颜色和文本颜色：
<div class="bg-primary text-white"> 使用自定义颜色 </div>
这样，我们就将背景颜色设置为了深蓝色，文本颜色设置为了白色。
TailwindCSS 中还提供了更多使用自定义颜色的方式，比如在 hover 状态下使用不同的颜色：
<a class="text-primary hover:text-secondary" href="#">查看详情</a>
这样，当鼠标悬停在该链接上时，文本颜色会自动变为浅灰色。
总结
通过上述介绍，我们可以看到，在 TailwindCSS 中添加自定义颜色非常简单，只需要在 tailwind.config.js 文件中定义即可。而且，使用自定义颜色也非常方便，只需要将其作为类名添加到 HTML 元素上即可。
使用自定义颜色不仅可以让我们更好地实现 UI 设计，还能提高开发效率，减少重复的 CSS 代码。
示例代码
下面是一个完整的示例代码，供读者参考：
-- -------------------- ---- -------
--------- -----
------
------
----------------------
----- ---------------- ----------------------------------------------------------------------
-------
------
---- ----------------- ---------- ---- ---- ------
-------
------
-- ------------------- --------------------- ---------
----
----
------- ------------------------------------------------------------
------- --------------------------------------------------------------------
-------
-------
在 tailwind.config.js 文件中加入以下内容：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
------- -
---------- ----------
------------ ----------
--
--
--
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64992f5648841e98946253ca