Краткая справка

Класс
Свойства
text-xsfont-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */
text-smfont-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */
text-basefont-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */
text-lgfont-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */
text-xlfont-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */
text-2xlfont-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */
text-3xlfont-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */
text-4xlfont-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */
text-5xlfont-size: 3rem; /* 48px */ line-height: 1;
text-6xlfont-size: 3.75rem; /* 60px */ line-height: 1;
text-7xlfont-size: 4.5rem; /* 72px */ line-height: 1;
text-8xlfont-size: 6rem; /* 96px */ line-height: 1;
text-9xlfont-size: 8rem; /* 128px */ line-height: 1;

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

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

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

text-sm

Быстрая коричневая лиса прыгает через ленивую собаку.

text-base

Быстрая коричневая лиса прыгает через ленивую собаку.

text-lg

Быстрая коричневая лиса прыгает через ленивую собаку.

text-xl

Быстрая коричневая лиса прыгает через ленивую собаку.

text-2xl

Быстрая коричневая лиса прыгает через ленивую собаку.

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

text-base/6

Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, что в тот момент я был морским биологом.

text-base/7

Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, что в тот момент я был морским биологом.

text-base/loose

Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, что в тот момент я был морским биологом.

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

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.

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? }].

tailwind.config.js
/** @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 value, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.

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

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