Height

@include('_partials.class-table', [ 'scroll' => true, 'rows' => $page->config['theme']['height']->map(function ($value, $name) { $class = ".h-{$name}"; $code = "height: {$value};"; return [$class, $code]; }) ])

Auto

Use h-auto to let the browser determine the height for the element.

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Screen height

Use h-screen to make an element span the entire height of the viewport.

@component('_partials.code-sample', ['class' => 'overflow-x-scroll'])

@endcomponent

Fixed height

Use h-{number} or h-px to set an element to a fixed height.

@component('_partials.code-sample', ['class' => 'flex justify-around items-end text-sm'])

@slot('code')@endslot @endcomponent

Full height

Use h-full to set an element's height to 100% of its parent, as long as the parent has a defined height.

@component('_partials.code-sample', ['class' => 'flex justify-around items-end text-sm'])

@slot('code')@endslot @endcomponent

---

Responsive

To control the height of an element at a specific breakpoint, add a {screen}: prefix to any existing width utility. For example, adding the class md:h-full to an element would apply the h-full utility at medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

@endslot

@slot('sm')

@endslot

@slot('md')

@endslot

@slot('lg')

@endslot

@slot('xl')

@endslot

@slot('code')

@endslot @endcomponent

---

Customizing

Height Scale

By default, Tailwind's height scale is a combination of the default spacing scale as well as some additional values specific to heights.

You can customize the spacing scale for padding, margin, width, and height all at once in the theme.spacing section of your tailwind.config.js file:

@component('_partials.customized-config', ['key' => 'theme.spacing'])

• sm: '8px',
• md: '16px',
• lg: '24px',
• xl: '48px', @endcomponent

To customize height separately, use the theme.height section of your tailwind.config.js file.

@component('_partials.customized-config', ['key' => 'theme.height'])

• sm: '8px',
• md: '16px',
• lg: '24px',
• xl: '48px', @endcomponent

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'height', 'property' => 'height', ], 'variants' => [ 'responsive', ], ])