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

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

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

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

Управляйте размером шрифта элемента, используя утилиты text-{size}.

<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</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 только при наведении.

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

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

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

Вы также можете использовать модификаторы вариантов для настройки медиа-запросов, таких как точки перегиба адаптивного дизайна, тёмной темы, prefers-reduced-motion и др. Например, используйте 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 для каждой утилиты text-{size}. Вы можете настроить собственные значения межстрочного интервала при использовании пользовательских размеров шрифтов, определив каждый размер с помощью кортежа [fontSize, lineHeight] в вашем файле tailwind.config.js.

module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    }
  }
}

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

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>

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