乐闻世界logo

如何在 TailwindCSS 添加新颜色并且保持 TailwindCSS 原有颜色？

前言

Tailwind CSS 通过提供原子类使得样式的应用变得非常快速和高效，有时候我们需要在 Tailwind 的标准颜色集以外添加一些自定义颜色。

在本教程中，将介绍如何在不删除默认颜色集的情况下，向 Tailwind CSS 添加新的颜色。

实现步骤

一、定制 tailwind.config.js

若要添加自定义颜色，需要在项目根目录下找到或创建一个 tailwind.config.js 配置文件。这个文件将用于覆盖 Tailwind CSS 默认配置。

javascript
module.exports = {
  // 其他配置...
  theme: {
    extend: {
      colors: {
        // 在这里添加新的颜色
      },
    },
  },
  // 其他配置...
};

二、添加新颜色

在 colors 对象中，你可以直接添加新的颜色名称和对应的值。为了保持原有颜色，我们使用 extend 关键字，这将保证我们添加的颜色只是扩展了默认的颜色集，而不是替换掉它们。

javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#5B83AD',
        'custom-pink': {
          light: '#F3D1D1',
          DEFAULT: '#F28B9B',
          dark: '#F06D80',
        },
      },
    },
  },
  // 其他配置...
};

在上面的例子中，我们添加了一个名称为 custom-blue 的颜色，并且为 custom-pink 提供了三个色阶：light、DEFAULT 和 dark。

三、使用新颜色

一旦你添加了新颜色，就可以在项目的 HTML 文件中像使用 Tailwind 的其他样式类一样使用它们了。

html
<!-- 使用自定义蓝色 -->
<div class="bg-custom-blue text-white p-5">Hello, Custom Blue!</div>

<!-- 使用自定义粉色的不同色阶 -->
<div class="bg-custom-pink-light p-5">Light Pink</div>
<div class="bg-custom-pink p-5">Default Pink</div>
<div class="bg-custom-pink-dark text-white p-5">Dark Pink</div>

总结

上述步骤成功地为 Tailwind CSS 添加了新的颜色，并且完全保留了原有的颜色集，现在可以在项目中自由地使用这些颜色，享受 Tailwind CSS 提供的灵活性和自定制能力。