Height — Tailwind CSS

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

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

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

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

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

<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>

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

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

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

<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, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы динамически сгенерировать свойство с любым произвольным значением.

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

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