Tailwind CSS 是一个流行的 CSS 框架，它为开发人员提供了一种简单的方法来设计和创建灵活且易于维护的网站。Tailwind CSS 的一个伟大之处在于它的颜色系统，您可以使用其中预定义的颜色，也可以自定义颜色。这篇文章将会介绍如何在 Tailwind CSS 中使用自定义颜色。

默认颜色

首先，让我们来看一下 Tailwind CSS 的默认颜色。Tailwind CSS 的默认颜色是由七个颜色和四种灰度色组成的。这些颜色可以通过以下的类名称在 HTML 中使用。

• 红色：.bg-red- 和 .text-red-
• 绿色：.bg-green- 和 .text-green-
• 蓝色：.bg-blue- 和 .text-blue-
• 黄色：.bg-yellow- 和 .text-yellow-
• 粉色：.bg-pink- 和 .text-pink-
• 紫色：.bg-purple- 和 .text-purple-
• 橙色：.bg-orange- 和 .text-orange-

灰度颜色可以通过 .bg-gray- 和 .text-gray- 类名称来使用。例如，.bg-gray-300 将会显示一个带有 300 级灰度的背景颜色。

自定义颜色

除了默认颜色之外，我们可以通过 Tailwind CSS 自定义我们自己的颜色。我们可以在 tailwind.config.js 中定义自己的颜色，以下是该文件的样例代码。

-- -------------------- ---- -------
-------------- - -
  ------ -
    ------- -
      ------- -
        ------------- ----------
        -------------- ---------
      --
    -
  --
  --------- ---
  -------- ---
-

在上文中，我们定义了两个自定义颜色 'brand-blue' 和 'brand-green'。我们可以在 HTML 中像下面这样使用它们。

<div class="bg-brand-blue">
  <p class="text-white">
    这是一个自定义颜色的背景。
  </p>
</div>

我们可以使用自己定义的颜色名称加上 - 后缀，来定义自定义颜色的背景颜色。例如，.bg-brand-blue 将会显示 'brand-blue' 颜色作为背景颜色。

我们还可以使用自定义颜色名称加上 - 后缀来定义自定义颜色的字体颜色，例如，.text-brand-green 将会显示 'brand-green' 颜色作为字体颜色。

颜色的使用

通过深入了解 Tailwind CSS 的颜色系统，我们可以轻松地进行自定义颜色的使用。在使用自定义颜色时，请务必保持一致性并将其与其他元素颜色保持协调。

总结

在 Tailwind 中定义自己的颜色非常容易。只需要在 tailwind.config.js 中添加您的颜色即可。定义自己的颜色可以使您的设计更加独特，也可以使设计更易于维护。

示例代码：https://codepen.io/pen/?template=VgwOMJz。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459bb04968c7c53b0bd6c54