How to use custom CSS colors in my tailwind preset?

如何在 TailwindCSS preset 中使用自定义 CSS 颜色

在使用 TailwindCSS 开发项目时，有时默认提供的颜色可能无法满足设计需求。这时，我们可以通过自定义 TailwindCSS 的配置，添加自定义的颜色。以下是在 TailwindCSS preset 中添加自定义颜色的具体步骤和示例。

第一步：创建或修改 TailwindCSS 配置文件

首先，确保你的项目中有一个 tailwind.config.js 文件。如果没有，你可以通过运行 npx tailwindcss init 命令来创建一个。

第二步：在配置文件中添加自定义颜色

在 tailwind.config.js 文件中，你可以通过扩展 theme.colors 来添加自定义颜色。例如，假设我们想添加一个名为 "brand-blue" 的颜色，其值为 #5c6ac4，可以按照以下方式修改配置文件：

javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#5c6ac4',
      }
    }
  }
}

第三步：使用自定义颜色

一旦自定义颜色被添加到配置文件中，你就可以在项目中任何使用 TailwindCSS 类的地方使用它。比如，要设置一个文本的颜色为我们新添加的 "brand-blue"，可以这样写：

html
<p class="text-brand-blue">这是一段使用自定义颜色的文本。</p>

示例：完整的配置和使用

假设我们想要一个主题颜色系列，包括主色和辅助色，我们可以这样配置：

javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#5c6ac4',
        'brand-yellow': '#ecc94b',
      }
    }
  }
}

然后在 HTML 中使用这些颜色：

html
<div class="bg-brand-blue text-white p-5">
  <p>这是主色的背景</p>
</div>
<div class="bg-brand-yellow text-white p-5">
  <p>这是辅助色的背景</p>
</div>

通过这种方式，我们不仅可以增加单一颜色，还可以创建一整套的色彩系统，使我们的网站或应用的视觉效果更加协调一致。

注意事项

• 自定义颜色应该在 extend 对象中添加，这样可以保持 Tailwind 的默认颜色设置不变。
• 确保颜色代码的准确无误，以避免显示错误。

通过上述步骤，你就可以轻松在 TailwindCSS 中使用自定义颜色，从而更好地满足项目的设计需求。