Межстрочный интервал

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

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

Относительные межстрочные интервалы

Используйте утилиты leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, и leading-loose, чтобы задать элементу относительный межстрочный интервал, основанный на его текущем размере шрифта.

<p class="leading-normal ...">So I started to walk into the water...</p>
<p class="leading-relaxed ...">So I started to walk into the water...</p>
<p class="leading-loose ...">So I started to walk into the water...</p>

Фиксированные межстрочные интервалы

Используйте утилиты leading-{size} для задания фиксированного межстрочного интервала элемента, независимо от текущего размера шрифта. Они полезны, когда требуется точный контроль над конечным размером элемента.

<p class="leading-6 ...">So I started to walk into the water...</p>
<p class="leading-7 ...">So I started to walk into the water...</p>
<p class="leading-8 ...">So I started to walk into the water...</p>

Условное применение

Состояния наведения, фокуса и другие

Tailwind позволяет условно применять утилиты в разных состояниях, используя модификаторы вариантов. Например, используйте hover:leading-loose для применения утилиты leading-loose только при наведении.

<p class="leading-none hover:leading-loose">
  <!-- ... -->
</p>

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

Точки останова и медиа-запросы

Вы также можете использовать модификаторы вариантов для настройки медиа-запросов, таких как точки останова адаптивного дизайна, тёмной темы, предпочтений уменьшения анимации и других. Например, используйте md:leading-loose для применения утилиты leading-loose только для экранов среднего размера и выше.

<p class="leading-none md:leading-loose">
  <!-- ... -->
</p>

Дополнительную информацию можно найти в документации адаптивного дизайна, тёмной темы и других модификаторов медиа-запросов.

Переопределение значения межстрочных интервалов по умолчанию

Важно отметить, что по умолчанию утилиты Tailwind для размера шрифта устанавливают свой собственный межстрочный интервал по умолчанию. Это означает, что при использовании утилит адаптивного размера шрифта, таких как sm:text-xl, любое явно заданное значение межстрочного интервала для меньших точек останова будет переопределено.

<!-- The `leading-loose` class will be overridden at the `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl">
  Maybe we can live without libraries...
</p>

Если вы хотите переопределить межстрочный интервал по умолчанию после установки размера шрифта для конкретной точки останова, убедитесь, что задали и межстрочный интервал для этой точки останова:

<!-- The `leading-loose` class will be overridden at the `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl md:leading-loose">
  Maybe we can live without libraries...
</p>

Использование одинакового межстрочного интервала для различных размеров шрифта обычно не даёт хороших результатов с точки зрения типографики. Межстрочный интервал, как правило, уменьшается по мере увеличения размера шрифта, поэтому поведение по умолчанию обычно экономит много работы. Если вы столкнётесь с трудностями, вы всегда можете настроить шкалу размеров шрифта, чтобы не включать значения межстрочных интервалов по умолчанию.

Использование пользовательских значений

Настройка вашей темы

По умолчанию Tailwind предоставляет шесть относительных и восемь фиксированных line-height утилит. Вы можете изменить, добавить или удалить их, настроив раздел lineHeight в файле конфигурации Tailwind.

module.exports = {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
        '12': '3rem',
      }
    }
  }
}

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

Произвольные значения

Если вам нужно использовать разовое значение line-height, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для динамического создания свойства с любым произвольным значением.

<p class="leading-[3rem]">
  <!-- ... -->
</p>

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