Типография
Утилиты для управления интерлиньяжем, или высотой строки, элемента.
| Class | Styles |
|---|---|
text-<size>/<number> | font-size: <size>;
line-height: calc(var(--spacing) * <number>); |
text-<size>/(<custom-property>) | font-size: <size>;
line-height: var(<custom-property>); |
text-<size>/[<value>] | font-size: <size>;
line-height: <value>; |
leading-none | line-height: 1; |
leading-<number> | line-height: calc(var(--spacing) * <number>) |
leading-(<custom-property>) | line-height: var(<custom-property>); |
leading-[<value>] | line-height: <value>; |
Используйте утилиты размера шрифта типа text-sm/6 и text-lg/7 для одновременной установки размера шрифта и высоты строки элемента:
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
<p class="text-base/6 ...">Так я начал заходить в воду...</p><p class="text-base/7 ...">Так я начал заходить в воду...</p><p class="text-base/8 ...">Так я начал заходить в воду...</p>Каждая утилита размера шрифта также устанавливает высоту строки по умолчанию, когда она не предоставлена. Вы можете узнать больше об этих значениях и о том, как их настроить, в документации по размеру шрифта.
Используйте утилиты leading-<number> типа leading-6 и leading-7 для установки высоты строки элемента независимо от размера шрифта:
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
<p class="text-sm leading-6">Так я начал заходить в воду...</p><p class="text-sm leading-7">Так я начал заходить в воду...</p><p class="text-sm leading-8">Так я начал заходить в воду...</p>Используйте утилиту leading-none для установки высоты строки элемента равной размеру шрифта:
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
<p class="text-2xl leading-none ...">Быстрая коричневая лиса...</p>Используйте синтаксис leading-[<value>] , чтобы задать line height на основе полностью пользовательского значения:
<p class="leading-[1.5] ..."> Lorem ipsum dolor sit amet...</p>Для переменных CSS вы также можете использовать синтаксис: leading-(<custom-property>)
<p class="leading-(--my-line-height) ..."> Lorem ipsum dolor sit amet...</p>Это просто сокращение, leading-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a line-height утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<p class="leading-5 md:leading-6 ..."> Lorem ipsum dolor sit amet...</p>Подробнее об использовании вариантов читайте в документации по вариантам.
Утилиты leading-<number> управляются переменной темы --spacing, которую можно настроить в вашей собственной теме:
@theme { --spacing: 1px; }Подробнее о настройке шкалы интервалов читайте в документации по переменным темы.