Цвет текста

Применение

Управляйте цветом текста элемента с помощью утилит text-{color}.

Изменение непрозрачности

Управляйте непрозрачностью цвета текста элемента с помощью утилит text-opacity-{amount}.

Дополнительные сведения смотрите в документации по непрозрачности текста.

Адаптивность

Чтобы управлять цветом текста элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите цвета текста. Например, используйте md:text-green-600, чтобы применить утилиту text-green-600 только при средних размерах экрана и выше.

<p class="text-blue-600 md:text-green-600 ...">
  Быстрая коричневая лиса...
</p>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Наведение

Чтобы контролировать цвет текста элемента при наведении, добавьте префикс hover: к любой существующей утилите цвета текста. Например, используйте hover:text-blue-600, чтобы применить утилиту text-blue-600 при наведении курсора.

Утилиты Наведения также можно комбинировать с адаптивными утилитами, добавляя префикс {screen}: перед префиксом hover:.

<button class="... md:text-blue-500 md:hover:text-blue-600 ...">Кнопка</button>

Фокус

Чтобы управлять цветом текста элемента в фокусе, добавьте префикс focus: к любой существующей утилите цвета текста. Например, используйте focus:text-blue-600, чтобы применить утилиту text-blue-600 к фокусу.

Утилиты Фокуса также можно комбинировать с адаптивными утилитами, добавляя префикс {screen}: перед префиксом focus:.

<input class="... md:text-gray-900 md:focus:text-red-600 ...">

Кастомизация

Цвета текста

По умолчанию Tailwind делает всю цветовую палитру по умолчанию доступной в виде цветов текста.

Вы можете настроить цветовую палитру, отредактировав theme.colors в Вашем файле tailwind.config.js, или настроить только цвета текста в разделе theme.textColor.

  // tailwind.config.js
  module.exports = {
    theme: {
-     textColor: theme => theme('colors'),
+     textColor: {
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
+     }
    }
  }

Варианты

По умолчанию, только responsive, темный режим (если включен), group-hover, focus-within, hover и focus варианты создаются для утилит text color.

Вы можете контролировать, какие варианты создаются для утилит text color для изменения свойства textColor в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты active:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       textColor: ['active'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения text color, Вы можете полностью отключить их, установив для textColor свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     textColor: false,
    }
  }