Блог

Главная - Вопросы по программированию - TailwindCSS неправильно меняет цвет текста

TailwindCSS неправильно меняет цвет текста

#tailwind-css

Вопрос:

Я использую TailwindCSS в своем проекте Laravel и Vue. Проблема, с которой я сталкиваюсь, заключается в том, когда я это делаю

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

Фактический результат-черный текст.
Когда я это сделаю

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

Текст белый, и он работает.
Таким образом, текст может быть изменен на белый, но, кроме белого цвета, все выглядит черным. Как я могу это исправить? Честно говоря, я понятия не имею, где искать в проекте решение этой проблемы.
Чтобы использовать TailwindCSS, я использую Laravel Breeze.

Комментарии:

1. Вы можете просто использовать документацию по Попутному ветру для цвета текста . text-orange-500 не существует. Либо text-red-500 или text-yellow-500

2. Спасибо. Извините, что не посмотрел должным образом документацию. Я думал, что смогу сделать -500 для всех цветов.

Ответ №1:

Оранжевый — это не один из цветов, который включен из коробки в попутном ветре. Существует палитра для оранжевого цвета, хотя вам просто нужно включить ее.

 // 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

Метки: