前言
Tailwind CSS 是一个十分受欢迎的 CSS 框架，它设计的初衷是帮助开发者通过类名快速生成 CSS 样式。除此之外，Tailwind CSS 还提供了一些非常实用的工具，其中之一就是颜色选取器。颜色选取器可以帮助开发人员轻松地选择和使用 Tailwind 预定义的颜色。
一般来说，Tailwind 的颜色选取器功能已经十分完备，可以满足大多数需求。但有时候，我们可能需要根据项目需求或品牌标识来定制自己的颜色选取器。接下来，我将介绍如何使用 Tailwind CSS 定制自己的颜色选取器。
定制颜色选取器
Tailwind 的颜色选取器功能是通过 gulp-colors 实现的。在使用 Tailwind CLI 创建项目时，这个选取器是默认添加进来的。以下是目前版本的 Tailwind CSS 所使用的旧版颜色选取器的截图：
为了定制自己的颜色选取器，我们需要对颜色的基础样式进行操作。在 Tailwind 的默认配置文件中有一个 colors 配置选项，这个选项包含了颜色样式类的定义。我们可以通过修改这个选项，重新编译 Tailwind，来自定义颜色选取器。
以下是颜色选取器原始的代码（可以在 tailwindcss/plugins/colors.js 中找到）：
-- -------------------- ---- -------
-------------- - -------- -- ------------- - -- -
----- ------ - -
-------------- --------------
---------- ---------------
-------- -------
-------- -------
------- -
----- ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
--
------ -
----- ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
--
--------- -
----- ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
--
-------- -
----- ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
--
------- -
----- ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
--
--------- -
----- ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
--
--------- -
----- ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
--
------- -
----- ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
------ ----------
--
--
----- --------------------------- - ----- ------ -- -
------ -
------------------ -
------------------- ------
--
--
--
----- --------------------- - ----- ------ -- -
------ -
-------------------- -
-------- ------
--
--
--
----- ------------------- - --------------------------------- ------- -- -
-- ------- ----- --- --------- -
------ -------------------------------- -------
-
------ ----------------------------------- ------- -- -
------ ----------------------------------------------- -------
---
----------
----- ------------- - --------------------------------- ------- -- -
-- ------- ----- --- --------- -
------ -------------------------- -------
-
------ ----------------------------------- ------- -- -
------ ----------------------------------------- -------
---
----------
------------------------------------- ------------------ -
--------- ---------------
---
--可以看出 Tailwind 的颜色选取器具体包括两个部分：
generateBackgroundUtilities和generateTextUtilities这两个函数用来生成背景颜色和文本颜色的样式。例如，.bg-red-500将会产生一个background-color: #f05252的样式。backgroundUtilities和textUtilities这两个变量会遍历所有的颜色定义，并调用上面两个函数生成相应的样式。最后通过addUtilities插件添加生成的样式。
可以看到，如果我们想定制自己的颜色选取器，我们只需要修改这些代码即可。我们可以在这里加入自己的背景或文本颜色定义，或更改现有定义的颜色。以下将展示两个简单的例子。
修改现有颜色选项
const colors = {
'transparent': 'transparent',
'current': 'currentColor',
'black': '#000',
'white': '#fff',
'custom': '#00b4db', // 添加自定义颜色
'gray': { ... }, // Tailwind 默认定义的颜色
};在这个示例代码中，我们添加了一个名为 custom 的自定义颜色。使用方式如下：
<div class="bg-custom text-white">使用自定义背景与文本颜色的元素</div>
在这个例子中，我们给 bg 前缀加上了我们新定义的 custom 颜色选项。这将产生一个样式 background-color: #00b4db。同样的，给 text 前缀加上我们新定义的 custom 颜色选项，将产生一个 color: #00b4db 的样式。这些新样式可以在我们自己的项目中使用。
添加新的颜色选项
-- -------------------- ---- ------- ----- ------------ - - ------- ---------- --------- ---------- ------- ---------- -- ----- ------ - - -------------- -------------- ---------- --------------- -------- ------- -------- ------- ---------------- -- ------- ------- - --- -- -- -------- ------- --
在这个示例代码中，我们定义了三种新的颜色，其中名为 pink 的颜色为紫色。接着，我们将这三种定义添加到 Tailwind 的颜色选项中。
现在，我们可以使用这三种新的颜色了。以下是应用这些新颜色的示例代码：
<div class="bg-pink text-white">这个文本将会是白色的（同时背景是紫色的）</div> <div class="bg-orange text-pink">这个文本将会是紫色的（同时背景是橙色的）</div> <div class="bg-lime text-black">这个文本将会是黑色的（同时背景是亮绿色的）</div>
我们可以看到，我们新定义的颜色和默认颜色一样方便使用。
结语
在本文中，我们简要介绍了 Tailwind CSS 颜色选取器的工作原理。然后，我们更深入地探讨了如何根据自己的需求在 Tailwind 的颜色选取器中添加或修改颜色。
虽然 Tailwind CSS 的默认颜色选取器已经非常实用了，但是，定制自己的颜色选取器可以帮助我们更好地满足特殊需求。希望本文能够作为您 Tailwind CSS 颜色定制的起点，让您在设计和开发中有更多的色彩选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782253f935627c900f99d69
