Высота строки

Относительная высота строк

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

Фиксированная высота строки

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

Адаптивность

Чтобы контролировать высоту строки элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите высоты строки. Например, используйте md:leading-loose, чтобы применить утилиту leading-loose только на экранах среднего размера и выше.

<p class="leading-none md:leading-loose ...">Lorem ipsum dolor sit amet ...</p>

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

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

<!-- Класс `leading-loose` будет переопределен в контрольной точке `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl">
  Lorem ipsum dolor sit amet ...
</p>

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

<!-- Класс `leading-loose` будет переопределен в контрольной точке `md` breakpoint -->
<p class="text-lg leading-loose md:text-xl md:leading-loose">
  Lorem ipsum dolor sit amet ...
</p>

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

Кастомизация

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

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        lineHeight: {
+         'extra-loose': '2.5',
+         '12': '3rem',
        }
      }
    }
  }

Варианты

По умолчанию, только responsive варианты создаются для утилит line height.

Вы можете контролировать, какие варианты создаются для утилит line height для изменения свойства lineHeight в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       lineHeight: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения line height, Вы можете полностью отключить их, установив для lineHeight свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     lineHeight: false,
    }
  }