如何在 Tailwind CSS 中添加自定义颜色

Tailwind CSS 是一个流行的 CSS 框架，它使用了一种类似于函数的方式提供了大量的 CSS 类，帮助你更快速地构建现代化的 Web 界面。虽然 Tailwind CSS 已经为我们提供了许多颜色类，但是我们有时可能需要自己定义一些新的颜色，以适应特定的界面设计需要。

本文将介绍如何在 Tailwind CSS 中添加自定义颜色。

1. 定义自定义颜色

首先，在 tailwind.config.js 文件中找到 theme 项，然后在其中添加一个 colors 属性。这个属性应该是一个字典，其中每个键值对定义了一个颜色名称和对应的值。

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

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

在上述代码中，我们添加了三种新的颜色：my-red、my-blue 和 my-gray。我们可以根据需要增加或修改这些颜色。

2. 使用自定义颜色

一旦我们在 tailwind.config.js 文件中定义了自定义颜色，我们就可以在 HTML 中使用它们了。例如，如果我们想将文本颜色设置为 my-red，我们只需要添加相应的 CSS 类：

<h1 class="text-my-red">Hello, world!</h1>

同样，我们可以在 background-color、border、outline 等 CSS 属性中使用自定义颜色。

3. 明确定义自定义颜色的用途

在使用自定义颜色时，建议设置一个明确的命名规范，并遵循它。这可以帮助你更好地组织代码，并使代码更具有可维护性。

例如，你可以选择将所有用于文本颜色的自定义颜色以 text- 作为前缀，将所有用于背景颜色的自定义颜色以 bg- 作为前缀。这可以帮助你更好地理解代码的作用，并使代码更具有可读性。

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

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

<div class="text-primary bg-secondary">Hello, world!</div>

结论

添加自定义颜色使得我们可以更好地适应特定的界面设计需求。通过修改 tailwind.config.js 文件中的 theme 属性，我们可以定义自己的颜色，然后在 HTML 中使用它们。为了使代码更具有可维护性，请确保明确定义自定义颜色的用途，并遵循命名规范。

示例代码详见：https://codesandbox.io/s/how-to-add-custom-colors-to-tailwind-css-mcwys

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