如何为tailwind-css添加新颜色并保留原始颜色？

在使用 tailwind-css 进行开发时，我们可能需要使用一些自定义的颜色。同时我们还希望能够保留 tailwind-css 中的原始颜色，升级或升级时也不会出现冲突。下面我们就来介绍如何实现这一目标。

原始颜色

tailwind-css 的原始颜色定义在 tailwind.config.js 文件中的 colors 属性。如果你还没有使用过 tailwind-css，你需要先安装并配置好它。接着在 tailwind.config.js 文件中，我们可以看到以下代码片段。

module.exports = {
  theme: {
    extend: {
      colors: {
        transparent: 'transparent',
        black: '#000',
        white: '#fff',
        gray: {
          100: '#f7fafc',
          200: '#edf2f7',
          300: '#e2e8f0',
          400: '#cbd5e0',
          500: '#a0aec0',
          600: '#718096',
          700: '#4a5568',
          800: '#2d3748',
          900: '#1a202c',
        },
      },
    },
  },
}

这个代码片段展示了 tailwind-css 的默认颜色定义，包括黑色、白色和灰色等。在这里，我们需要注意到 colors 属性是一个包含键值对的对象。每一个键值对的键是颜色的名称，值则是颜色的代码（hex 或 rgba）。

自定义颜色

我们可以在 colors 对象中加入自定义的颜色。比如，我们要添加一个名为 brand-red 的深红色，可以在 colors 对象中添加以下代码。

colors: {
  'brand-red': '#d60000',
},

保留原始颜色

如果我们只是这样添加自定义颜色，很容易出现意想不到的冲突。当我们升级 tailwind-css 或者其他相关库时，这种冲突可能会导致构建失败或者页面出现奇怪的问题。因此，我们需要一种方法来保留 tailwind-css 的原始颜色。在这里，我们可以使用 extend 属性来扩展 tailwind-css 默认的颜色值，并添加自定义颜色。

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-red': {
          500: '#d60000',
        },
      },
    },
  },
}

这个代码片段展示了如何扩展 tailwind-css 默认的颜色值，同时添加自定义颜色。在这里，我们将 brand-red 定义为一个对象，其包含唯一的属性 500，表示这个颜色在 tailwind-css 中对应的主色调（color palette）。这样，在我们添加了自定义颜色的同时，也保留了原始的颜色定义。

代码片段

# 如何为tailwind-css添加新颜色并保留原始颜色？

在使用 `tailwind-css` 进行开发时，我们可能需要使用一些自定义的颜色。同时我们还希望能够保留 `tailwind-css` 中的原始颜色，升级或升级时也不会出现冲突。下面我们就来介绍如何实现这一目标。

## 原始颜色

`tailwind-css` 的原始颜色定义在 `tailwind.config.js` 文件中的 `colors` 属性。如果你还没有使用过 `tailwind-css`，你需要先安装并配置好它。接着在 `tailwind.config.js` 文件中，我们可以看到以下代码片段。

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        transparent: 'transparent',
        black: '#000',
        white: '#fff',
        gray: {
          100: '#f7fafc',
          200: '#edf2f7',
          300: '#e2e8f0',
          400: '#cbd5e0',
          500: '#a0aec0',
          600: '#718096',
          700: '#4a5568',
          800: '#2d3748',
          900: '#1a202c',
        },
      },
    },
  },
}
```

这个代码片段展示了 `tailwind-css` 的默认颜色定义，包括黑色、白色和灰色等。在这里，我们需要注意到 `colors` 属性是一个包含键值对的对象。每一个键值对的键是颜色的名称，值则是颜色的代码（hex 或 rgba）。

## 自定义颜色

我们可以在 `colors` 对象中加入自定义的颜色。比如，我们要添加一个名为 `brand-red` 的深红色，可以在 `colors` 对象中添加以下代码。

```js
colors: {
  'brand-red': '#d60000',
},
```

## 保留原始颜色

如果我们只是这样添加自定义颜色，很容易出现意想不到的冲突。当我们升级 `tailwind-css` 或者其他相关库时，这种冲突可能会导致构建失败或者页面出现奇怪的问题。因此，我们需要一种方法来保留 `tailwind-css` 的原始颜色。在这里，我们可以使用 `extend` 属性来扩展 `tailwind-css` 默认的颜色值，并添加自定义颜色。

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-red': {
          500: '#d60000',
        },
      },
    },
  },
}
```

这个代码片段展示了如何扩展 `tailwind-css` 默认的颜色值，同时添加自定义颜色。在这里，我们将 `brand-red` 定义为一个对象，其包含唯一的属性 `500`，表示这个颜色在 `tailwind-css` 中对应的主色调（color palette）。这样，在我们添加了自定义颜色的同时，也保留了原始的颜色定义。