Утилиты для установки высоты элемента
<div class="h-auto ...">h-auto</div><div class="h-screen p-6 ...">h-screen</div>Используйте h-{number} или h-px, чтобы установить элемент на фиксированную высоту.
h-8
h-12
h-16
h-24
<div>
<div class="h-8 ..."></div>
<div class="h-12 ..."></div>
<div class="h-16 ..."></div>
<div class="h-24 ..."></div>
</div>Используйте h-full, чтобы установить высоту элемента равной 100% от его родительского элемента, если родительский элемент имеет определенную высоту.
<div class="h-48">
<div class="h-full ...">h-full</div>
</div>Чтобы контролировать высоту элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите ширины. Например, добавление класса md:h-full к элементу приведет к применению утилиты h-full при средних размерах экрана и выше.
<div class="h-8 md:h-full"></div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию шкала высоты Tailwind представляет собой комбинацию шкалы интервалов по умолчанию, а также некоторых дополнительных значений, специфичных для высот.
Вы можете настроить шкалу интервалов для заполнения, полей, ширины и высоты одновременно в разделе theme.spacing Вашего файла tailwind.config.js:
// tailwind.config.js
module.exports = {
theme: {
spacing: {
+ sm: '8px',
+ md: '16px',
+ lg: '24px',
+ xl: '48px',
}
}
}Чтобы настроить высоту отдельно, используйте раздел theme.height Вашего файла tailwind.config.js.
// tailwind.config.js
module.exports = {
theme: {
height: {
+ sm: '8px',
+ md: '16px',
+ lg: '24px',
+ xl: '48px',
}
}
}По умолчанию, только responsive варианты создаются для утилит height.
Вы можете контролировать, какие варианты создаются для утилит height для изменения свойства height в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ height: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения height, Вы можете полностью отключить их, установив для height свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ height: false,
}
}