Question

我在 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。

Answer 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

TailwindCSS 未正确更改文本颜色

1 个答案: