【记录】CSS｜Tailwind 的主题定义的颜色的使用方法（--color啥的）

在Tailwind CSS中，你可以使用自定义的主题来定义颜色。这些颜色可以在tailwind.config.js文件中的theme属性下定义。

以下是如何在Tailwind CSS中使用自定义颜色的步骤：

1. 在tailwind.config.js文件中定义颜色：

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-color': '#ff0000', // 使用 'custom-color' 作为颜色名称
      },
    },
  },
  // 其他配置...
};

2. 在你的组件中使用这个颜色：

<!-- 使用类名 'text-custom-color' 来应用颜色 -->
<div class="text-custom-color">
  这是一段红色的文本。
</div>

3. 如果你想要在自定义CSS中使用这个颜色，可以这样做：

/* 使用 CSS 变量 --tw-color-custom-color */
.custom-style {
  color: var(--tw-color-custom-color);
}

4. 在HTML元素上应用自定义的CSS类：

<div class="custom-style">
  这是另一段红色的文本。
</div>

请注意，颜色名称'custom-color'可以根据你的需要更改，而颜色值'#ff0000'也应该替换为你想要使用的实际颜色代码。