TailwindCSS 未正确更改文本颜色答案

【问题标题】：TailwindCSS is not changing the text colour correctlyTailwindCSS 未正确更改文本颜色
【发布时间】：2021-06-30 02:41:22
【问题描述】：

我在我的 Laravel 和 Vue 项目中使用 TailwindCSS。我遇到的问题是当我这样做时

                <h4 class="font-medium text-orange-500">
                    {{ movie.title }}
                </h4>

实际结果是黑色文本。当我这样做时

                    <h4 class="font-medium text-white">
                    {{ status.title }}
                </h4>

文本是白色的，它可以工作。因此，文本可以更改为白色，但除白色以外的所有颜色都显示为黑色。我怎样才能解决这个问题？老实说，我不知道在项目中的哪里可以解决这个问题。要使用 TailwindCSS，我使用的是 Laravel Breeze。

【问题讨论】：

您可以使用 Text Color 的 Tailwind 文档。 text-orange-500 不存在。 text-red-500 或 text-yellow-500
谢谢。很抱歉没有正确查看文档。我以为我可以为所有颜色做到 -500。

标签： tailwind-css

【解决方案1】：

橙色不是 Tailwind 中开箱即用的颜色之一。不过有一个橙色的调色板，你只需要包括它。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        orange: colors.orange,
      }
    }
  }
}

https://tailwindcss.com/docs/customizing-colors#color-palette-reference

【讨论】：