Размер шрифта

​Основы использования

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

Используйте утилиты text-* для управления размером шрифта элемента.

<p class="text-sm ...">Быстрая коричневая лиса ...</p>
<p class="text-base ...">Быстрая коричневая лиса ...</p>
<p class="text-lg ...">Быстрая коричневая лиса ...</p>
<p class="text-xl ...">Быстрая коричневая лиса ...</p>
<p class="text-2xl ...">Быстрая коричневая лиса ...</p>

​Установка высоты строки

Установите высоту строки элемента одновременно с установкой размера шрифта, добавив модификатор высоты строки в любую утилиту изменения размера шрифта. Например, используйте text-xl/8, чтобы установить размер шрифта 1.25rem с высотой строки 2rem.

<p class="text-base/6 ...">So I started to walk into the water...</p>
<p class="text-base/7 ...">So I started to walk into the water...</p>
<p class="text-base/loose ...">So I started to walk into the water...</p>

Вы можете использовать любое значение, определенное в вашей шкале высоты строки, или использовать произвольные значения, если вам нужно отклониться от ваших токенов дизайна.

<p class="text-sm/[17px] ..."></p>

​Применяя условно

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

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

<p class="text-sm hover:text-base">
  <!-- ... -->
</p>

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

​Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:text-base, чтобы применить утилиту text-base только на экранах среднего размера и выше.

<p class="text-sm md:text-base">
  <!-- ... -->
</p>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

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

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

Вы можете настроить свой собственный набор утилит для изменения размера шрифта, используя раздел theme.fontSize вашего файла tailwind.config.js.

module.exports = {
  theme: {
    fontSize: {
      sm: '0.8rem',
      base: '1rem',
      xl: '1.25rem',
      '2xl': '1.563rem',
      '3xl': '1.953rem',
      '4xl': '2.441rem',
      '5xl': '3.052rem',
    }
  }
}

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

​Предоставление высоты строки по умолчанию

Тема Tailwind по умолчанию настраивает разумную line-height по умолчанию для каждой утилиты font-size. Вы можете настроить высоту строк по умолчанию при использовании нестандартных размеров шрифта, определив каждый размер с помощью кортежа формы [fontSize, lineHeight] в файле tailwind.config.js.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    }
  }
}

Вы также можете указать высоту строки по умолчанию, используя синтаксис объекта, что позволяет также указать значения по умолчанию для letter-spacing и font-weight. Вы можете сделать это, используя кортеж вида [fontSize, { lineHeight?, letterSpacing?, fontWeight? }].

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fontSize: {
      '2xl': ['1.5rem', {
        lineHeight: '2rem',
        letterSpacing: '-0.01em',
        fontWeight: '500',
      }],
      '3xl': ['1.875rem', {
        lineHeight: '2.25rem',
        letterSpacing: '-0.02em',
        fontWeight: '700',
      }],
    }
  }
}

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

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

<p class="text-[14px]">
  <!-- ... -->
</p>

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