Минимальная высота

Применение

Установите минимальную высоту элемента с помощью утилит min-h-0, min-h-full или min-h-screen.

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

Чтобы управлять минимальной высотой элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите минимальной высоты.

<div class="h-48 ...">
  <div class="h-24 min-h-0 md:min-h-full ...">
    <!-- ... -->
  </div>
</div>

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

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

Шкала минимальной высоты

Настройте шкалу минимальной высоты по умолчанию для Tailwind в разделе theme.minHeight Вашего файла tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
      minHeight: {
+       '0': '0',
+       '1/4': '25%',
+       '1/2': '50%',
+       '3/4': '75%',
+       'full': '100%',
      }
    }
  }

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

Варианты

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

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

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

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

Отключение

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

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