前言
Tailwind 是一个 CSS 框架，可以使用户快速构建界面，并减少重复的 CSS 编写工作。其优点是具有高度的灵活性和可定制性，其中包括一组默认主题颜色。
然而，这些默认值不一定总能满足项目的需求。这是我们需要自定义主题颜色的时候，越来越多的开发者正在选择 Tailwind，为了支持任何项目的多样化颜色需求。在这篇文章中，我们将详细介绍如何使用 Tailwind 扩展自定义主题颜色。
什么是 Tailwind 颜色？
在 Tailwind 中，颜色定义的方式是采用 CSS 变量的形式进行定义，这些变量具体定义在 /src/colors.js 文件中。Tailwind 的主题颜色与许多其他应用程序中的颜色不同，因为它是由两个变量（Light 和 Dark）拼接而成的，例如 blue 颜色的定义：
-- -------------------- ---- ------- ----- - ---- ---------- ---- ---------- ---- ---------- ---- ---------- ---- ---------- ---- ---------- ---- ---------- ---- ---------- ---- ---------- --
正如你所看到的，每个颜色都有数值（从 100 到 900）对应于 Light 或 Dark 主题。对于使用 Tailwind 的项目，这意味着通过更改这些 CSS 变量，就可以轻松地创建新的自定义主题颜色。
创建自定义主题颜色
要创建自定义主题颜色，可以直接编辑 /src/colors.js 文件，向该文件的结尾添加一个新的颜色对象（基本结构为 name: {}），然后设置需要的颜色值:
-- -------------------- ---- ------- -------- - ---- ---------- ---- ---------- ---- ---------- ---- ---------- ---- ---------- ---- ---------- ---- ---------- ---- ---------- ---- --------- -
上面的示例代码中，我们定义了一种名为 darkRed 的自定义主题颜色。在这种情况下，我们定义了 9 个不同程度（100-900）的颜色，这些颜色可以按照需要进行自定义并使用。这些颜色值也可以是十六进制，RGB 或 HSL 等颜色格式。
导入自定义主题颜色
要使用自定义主题颜色，需要将其导入到自定义配置文件中，在项目根目录的 tailwind.config.js 文件中添加以下代码：
-- -------------------- ---- -------
----- ------ - -----------------------------
-------------- - -
------ ---
--------- -------- -- -- ------- -- -------
------ -
------- -
------- -
------- ---------------
--
--
--
--------- -
------- ---
--
-------- ---
-上面的示例代码中，我们添加了 custom 自定义颜色，它包含我们刚刚定义的 darkRed 颜色值。
使用自定义主题颜色
在导入到配置文件中后，自定义颜色就可以在 HTML 和 CSS 中使用了。下面是一个使用 darkRed 自定义颜色的示例：
<div class="bg-custom-500"> <h1 class="text-custom-200">Hello Tailwind!</h1> </div>
总结
在本文中，我们了解了如何使用 Tailwind 自定义主题颜色。它非常简单，只需要编辑颜色文件并将自定义颜色导入配置文件中。接下来您可以在 HTML 和 CSS 中使用自定义颜色。
此外，定制主题颜色在进行 UI 设计时非常重要，它可以帮助您的项目脱颖而出，并与众不同。因此，这是 Tailwind 提供的一个伟大特性，我们可以灵活地为应用程序定制主题颜色，以支持更多的设计需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b06a87add4f0e0ff9c5167