Типография
Утилиты для управления размером шрифта элемента.
| Class | Styles |
|---|---|
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 для установки размера шрифта элемента:
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
<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 для установки размера шрифта и высоты строки элемента одновременно:
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
<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; }Подробнее о настройке темы читайте в документации темы.