Height

Auto

Use to let the browser determine the height for the element.

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

<div class="bg-gray-400 h-screen"></div>

Fixed height

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

<div class="h-8 w-8 ..."></div>
<div class="h-12 w-12 ..."></div>

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

Responsive

For more information about Tailwind’s responsive design features, check out the documentation.

all

sm

md

xl

<div class="h-8 sm:h-12 md:h-16 lg:h-20 xl:h-24 w-32 bg-gray-400"></div>

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
    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.

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
    variants: {
      // ...
-     height: ['responsive'],
+     height: ['responsive', 'hover', 'focus'],
    }
  }

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

Min-Height →