Utilities for setting the height of an element
<div class="h-auto ...">h-auto</div>
<div class="h-screen p-6 ...">h-screen</div>
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>
Use h-full
to set an element's height to 100% of its parent, as long as the parent has a defined height.
<div class="h-48">
<div class="h-full ...">h-full</div>
</div>
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.
<div class="h-8 md:h-full"></div>
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
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:
// tailwind.config.js
module.exports = {
theme: {
spacing: {
+ sm: '8px',
+ md: '16px',
+ lg: '24px',
+ xl: '48px',
}
}
}
To customize height separately, use the theme.height
section of your tailwind.config.js
file.
// tailwind.config.js
module.exports = {
theme: {
height: {
+ sm: '8px',
+ md: '16px',
+ lg: '24px',
+ xl: '48px',
}
}
}
By default, only responsive variants are generated for height utilities.
You can control which variants are generated for the height utilities by modifying the height
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ height: ['hover', 'focus'],
}
}
}
If you don't plan to use the height utilities in your project, you can disable them entirely by setting the height
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ height: false,
}
}