Tailwind 如何扩展自定义主题颜色-JavaScript中文网-JavaScript教程资源分享门户

前言

Tailwind 是一个 CSS 框架，可以使用户快速构建界面，并减少重复的 CSS 编写工作。其优点是具有高度的灵活性和可定制性，其中包括一组默认主题颜色。

然而，这些默认值不一定总能满足项目的需求。这是我们需要自定义主题颜色的时候，越来越多的开发者正在选择 Tailwind，为了支持任何项目的多样化颜色需求。在这篇文章中，我们将详细介绍如何使用 Tailwind 扩展自定义主题颜色。

什么是 Tailwind 颜色？

在 Tailwind 中，颜色定义的方式是采用 CSS 变量的形式进行定义，这些变量具体定义在 /src/colors.js 文件中。Tailwind 的主题颜色与许多其他应用程序中的颜色不同，因为它是由两个变量（Light 和 Dark）拼接而成的，例如 blue 颜色的定义：

blue: {
  100: '#ebf8ff',
  200: '#bee3f8',
  300: '#90cdf4',
  400: '#63b3ed',
  500: '#4299e1',
  600: '#3182ce',
  700: '#2b6cb0',
  800: '#2c5282',
  900: '#2a4365',
},

正如你所看到的，每个颜色都有数值（从 100 到 900）对应于 Light 或 Dark 主题。对于使用 Tailwind 的项目，这意味着通过更改这些 CSS 变量，就可以轻松地创建新的自定义主题颜色。

创建自定义主题颜色

要创建自定义主题颜色，可以直接编辑 /src/colors.js 文件，向该文件的结尾添加一个新的颜色对象（基本结构为 name: {}），然后设置需要的颜色值:

darkRed: {
  100: '#FF6B6B',
  200: '#ED3939',
  300: '#D92626',
  400: '#B92020',
  500: '#9E1D1D',
  600: '#8C1A1A',
  700: '#6E1414',
  800: '#570F0F',
  900: '#3D0707'
}

上面的示例代码中，我们定义了一种名为 darkRed 的自定义主题颜色。在这种情况下，我们定义了 9 个不同程度（100-900）的颜色，这些颜色可以按照需要进行自定义并使用。这些颜色值也可以是十六进制，RGB 或 HSL 等颜色格式。

导入自定义主题颜色

要使用自定义主题颜色，需要将其导入到自定义配置文件中，在项目根目录的 tailwind.config.js 文件中添加以下代码：

const colors = require('tailwindcss/colors')

module.exports = {
  purge: [],
  darkMode: 'class', // or ‘media’ or ‘false’
  theme: {
    extend: {
      colors: {
        custom: colors.darkRed,
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

上面的示例代码中，我们添加了 custom 自定义颜色，它包含我们刚刚定义的 darkRed 颜色值。

使用自定义主题颜色

在导入到配置文件中后，自定义颜色就可以在 HTML 和 CSS 中使用了。下面是一个使用 darkRed 自定义颜色的示例：

<div class="bg-custom-500">
  <h1 class="text-custom-200">Hello Tailwind!</h1>
</div>

总结

在本文中，我们了解了如何使用 Tailwind 自定义主题颜色。它非常简单，只需要编辑颜色文件并将自定义颜色导入配置文件中。接下来您可以在 HTML 和 CSS 中使用自定义颜色。

此外，定制主题颜色在进行 UI 设计时非常重要，它可以帮助您的项目脱颖而出，并与众不同。因此，这是 Tailwind 提供的一个伟大特性，我们可以灵活地为应用程序定制主题颜色，以支持更多的设计需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b06a87add4f0e0ff9c5167