tailwindcss/docs/source/docs/min-height.blade.md

extends	title	description	features
_layouts.documentation	Min-Height	Utilities for setting the minimum height of an element	responsive customizable hover focus true true false false

@include('_partials.work-in-progress')

@include('_partials.class-table', [ 'scroll' => false, 'rows' => [ [ '.min-h-0', 'min-height: 0;', "Set the element's minimum height to 0.", ], [ '.min-h-full', 'min-height: 100%;', "Set the element's minimum height to 100%.", ], [ '.min-h-screen', 'min-height: 100vh;', "Set the element's minimum height to 100vh.", ], ] ])

Customizing

Responsive, Hover, and Focus Variants

By default, only responsive variants are generated for min height utilities.

You can control which variants are generated for the min height utilities by modifying the minHeight property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

{
    // ...
    modules: { 
        // ...
        minHeight: ['responsive', 'hover', 'focus'],
    }
}

Disabling

If you aren't using the min height utilities in your project, you can disable them entirely by setting the minHeight property to false in the modules section of your config file:

{
    // ...
    modules: {
        // ...
        minHeight: false,
    }
}