Краткая справка

Класс
Свойства
h-0height: 0px;
h-pxheight: 1px;
h-0.5height: 0.125rem; /* 2px */
h-1height: 0.25rem; /* 4px */
h-1.5height: 0.375rem; /* 6px */
h-2height: 0.5rem; /* 8px */
h-2.5height: 0.625rem; /* 10px */
h-3height: 0.75rem; /* 12px */
h-3.5height: 0.875rem; /* 14px */
h-4height: 1rem; /* 16px */
h-5height: 1.25rem; /* 20px */
h-6height: 1.5rem; /* 24px */
h-7height: 1.75rem; /* 28px */
h-8height: 2rem; /* 32px */
h-9height: 2.25rem; /* 36px */
h-10height: 2.5rem; /* 40px */
h-11height: 2.75rem; /* 44px */
h-12height: 3rem; /* 48px */
h-14height: 3.5rem; /* 56px */
h-16height: 4rem; /* 64px */
h-20height: 5rem; /* 80px */
h-24height: 6rem; /* 96px */
h-28height: 7rem; /* 112px */
h-32height: 8rem; /* 128px */
h-36height: 9rem; /* 144px */
h-40height: 10rem; /* 160px */
h-44height: 11rem; /* 176px */
h-48height: 12rem; /* 192px */
h-52height: 13rem; /* 208px */
h-56height: 14rem; /* 224px */
h-60height: 15rem; /* 240px */
h-64height: 16rem; /* 256px */
h-72height: 18rem; /* 288px */
h-80height: 20rem; /* 320px */
h-96height: 24rem; /* 384px */
h-autoheight: auto;
h-1/2height: 50%;
h-1/3height: 33.333333%;
h-2/3height: 66.666667%;
h-1/4height: 25%;
h-2/4height: 50%;
h-3/4height: 75%;
h-1/5height: 20%;
h-2/5height: 40%;
h-3/5height: 60%;
h-4/5height: 80%;
h-1/6height: 16.666667%;
h-2/6height: 33.333333%;
h-3/6height: 50%;
h-4/6height: 66.666667%;
h-5/6height: 83.333333%;
h-fullheight: 100%;
h-screenheight: 100vh;
h-svhheight: 100svh;
h-lvhheight: 100lvh;
h-dvhheight: 100dvh;
h-minheight: min-content;
h-maxheight: max-content;
h-fitheight: fit-content;

Основы использования

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

Используйте h-{number} или h-px, чтобы установить элемент на фиксированную высоту.

h-96
h-80
h-64
h-48
h-40
h-32
h-24
<div class="h-96 ...">h-96</div>
<div class="h-80 ...">h-80</div>
<div class="h-64 ...">h-64</div>
<div class="h-48 ...">h-48</div>
<div class="h-40 ...">h-40</div>
<div class="h-32 ...">h-32</div>
<div class="h-24 ...">h-24</div>

Полная высота

Используйте h-full, чтобы установить высоту элемента равной 100% от его родительского элемента, если родительский элемент имеет определенную высоту.

<div class="h-48">
  <div class="h-full ...">
    <!-- This element will have a height of `12rem` (h-48) -->
  </div>
</div>

Высота области просмотра

Используйте h-screen, чтобы элемент занимал всю высоту области просмотра.

<div class="h-screen">
  <!-- ... -->
</div>

Динамическая высота области просмотра

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

Scroll up and down in the viewport to hide/show the browser UI

tailwindcss.com

h-dvh

<div class="h-dvh">
  <!-- ... -->
</div>

Большая высота области просмотра

Используйте h-lvh, чтобы установить высоту элемента на максимально возможную высоту области просмотра. Это ведет себя так же, как 100vh.

Scroll up and down in the viewport to hide/show the browser UI

tailwindcss.com

h-lvh

<div class="h-lvh">
  <!-- ... -->
</div>

Небольшая высота области просмотра

Используйте h-svh, чтобы установить высоту элемента на минимально возможную высоту области просмотра.

Scroll up and down in the viewport to hide/show the browser UI

tailwindcss.com

h-svh

<div class="h-svh">
  <!-- ... -->
</div>

Применяя условно

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:h-full, чтобы применять утилиту h-full только при hover.

<div class="h-8 hover:h-full">
  <!-- ... -->
</div>

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

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:h-full, чтобы применить утилиту h-full только на экранах среднего размера и выше.

<div class="h-8 md:h-full">
  <!-- ... -->
</div>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.


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

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

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

Вы можете настроить масштаб интервалов, отредактировав theme.spacing или theme.extend.spacing в вашем файле tailwind.config.js.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

Чтобы настроить высоту отдельно, используйте раздел theme.height Вашего файла tailwind.config.js.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      height: {
        '128': '32rem',
      }
    }
  }
}

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

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

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

<div class="h-[32rem]">
  <!-- ... -->
</div>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.