1. Типография
  2. font-size

Типография

font-size

Утилиты для управления размером шрифта элемента.

ClassStyles
text-xs
font-size: var(--text-xs); /* 0.75rem (12px) */ line-height: var(--text-xs--line-height); /* calc(1 / 0.75) */
text-sm
font-size: var(--text-sm); /* 0.875rem (14px) */ line-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */
text-base
font-size: var(--text-base); /* 1rem (16px) */ line-height: var(--text-base--line-height); /* calc(1.5 / 1) */
text-lg
font-size: var(--text-lg); /* 1.125rem (18px) */ line-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */
text-xl
font-size: var(--text-xl); /* 1.25rem (20px) */ line-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */
text-2xl
font-size: var(--text-2xl); /* 1.5rem (24px) */ line-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */
text-3xl
font-size: var(--text-3xl); /* 1.875rem (30px) */ line-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */
text-4xl
font-size: var(--text-4xl); /* 2.25rem (36px) */ line-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */
text-5xl
font-size: var(--text-5xl); /* 3rem (48px) */ line-height: var(--text-5xl--line-height); /* 1 */
text-6xl
font-size: var(--text-6xl); /* 3.75rem (60px) */ line-height: var(--text-6xl--line-height); /* 1 */
text-7xl
font-size: var(--text-7xl); /* 4.5rem (72px) */ line-height: var(--text-7xl--line-height); /* 1 */
text-8xl
font-size: var(--text-8xl); /* 6rem (96px) */ line-height: var(--text-8xl--line-height); /* 1 */
text-9xl
font-size: var(--text-9xl); /* 8rem (128px) */ line-height: var(--text-9xl--line-height); /* 1 */
text-(length:<custom-property>)
font-size: var(<custom-property>);
text-[<value>]
font-size: <value>;

Примеры

Базовый пример

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

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-sm/6 и text-lg/7 для установки размера шрифта и высоты строки элемента одновременно:

text-sm/6

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

text-sm/7

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

text-sm/8

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

<p class="text-sm/6 ...">Так я начал заходить в воду...</p><p class="text-sm/7 ...">Так я начал заходить в воду...</p><p class="text-sm/8 ...">Так я начал заходить в воду...</p>

Использование пользовательского значения

Используйте синтаксис text-[<value>] , чтобы задать font size на основе полностью пользовательского значения:

<p class="text-[14px] ...">  Lorem ipsum dolor sit amet...</p>

Для переменных CSS вы также можете использовать синтаксис: text-(length:<custom-property>)

<p class="text-(length:--my-text-size) ...">  Lorem ipsum dolor sit amet...</p>

Это просто сокращение, text-[length:var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a font-size утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<p class="text-sm md:text-base ...">  Lorem ipsum dolor sit amet...</p>

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

Кастомизация вашей темы

Используйте переменные темы --text-* для настройки утилит font size в вашем проекте:

@theme {  --text-tiny: 0.625rem; }

Теперь утилиту text-tiny можно использовать в вашей разметке:

<div class="text-tiny">  <!-- ... --></div>

Вы также можете предоставить значения по умолчанию для line-height, letter-spacing и font-weight для размера шрифта:

@theme {  --text-tiny: 0.625rem;  --text-tiny--line-height: 1.5rem;   --text-tiny--letter-spacing: 0.125rem;   --text-tiny--font-weight: 500; }

Подробнее о настройке темы читайте в документации темы.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков