Font Weight — Tailwind CSS

Быстрый справочник

Класс	Свойства
font-thin	font-weight: 100;
font-extralight	font-weight: 200;
font-light	font-weight: 300;
font-normal	font-weight: 400;
font-medium	font-weight: 500;
font-semibold	font-weight: 600;
font-bold	font-weight: 700;
font-extrabold	font-weight: 800;
font-black	font-weight: 900;

Базовое использование

Установка веса шрифта

Управляйте весом шрифта элемента с помощью утилит font-{weight}.

<p class="font-light ...">The quick brown fox ...</p>
<p class="font-normal ...">The quick brown fox ...</p>
<p class="font-medium ...">The quick brown fox ...</p>
<p class="font-semibold ...">The quick brown fox ...</p>
<p class="font-bold ...">The quick brown fox ...</p>

Условное применение

Наведение, фокус и другие состояния

Tailwind позволяет условно применять утилиты в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:font-bold для применения утилиты font-bold только при наведении.

<p class="font-normal hover:font-bold">
  <!-- ... -->
</p>

Полный список всех доступных модификаторов состояний можно найти в документации Наведение, фокус и другие состояния.

Точки разрыва и медиа-запросы

Вы также можете использовать модификаторы вариантов для настройки медиа-запросов, таких как точки разрыва адаптивности, тёмный режим, prefers-reduced-motion и другие. Например, используйте md:font-bold для применения утилиты font-bold только при размерах экрана среднего и выше.

<p class="font-normal md:font-bold">
  <!-- ... -->
</p>

Дополнительную информацию можно найти в документации по Адаптивному дизайну, Тёмному режиму и другим модификаторам медиа-запросов.

Использование пользовательских значений

Настройка вашей темы

По умолчанию Tailwind предоставляет девять font-weight утилит. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.fontWeight в файле конфигурации Tailwind.

tailwind.config.js

module.exports = {
  theme: {
    fontWeight: {
      thin: '100',
      hairline: '100',
      extralight: '200',
      light: '300',
      normal: '400',
      medium: '500',
      semibold: '600',
      bold: '700',
      extrabold: '800',
      'extra-bold': '800',
      black: '900',
    }
  }
}

Дополнительную информацию о настройке темы по умолчанию можно найти в документации по настройке темы.

Произвольные значения

Если вам нужно использовать разовое font-weight значение, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для динамического создания свойства с любым произвольным значением.

<p class="font-[1100]">
  <!-- ... -->
</p>

Дополнительную информацию о поддержке произвольных значений можно найти в документации по произвольным значениям.