Tailwind CSS Height

The height utility classes in Tailwind CSS are used to set the height of an element.

Syntax

The syntax for using the height utility classes is as follows:

<div class="h-{size}">
  ...
</div>

Here, {size} can be one of the following:

• 0 - sets the height of the element to 0.
• px - sets the height of the element to a specific pixel value. For example, h-10 sets the height to 10px.
• full - sets the height to 100% of the container element.
• screen - sets the height to the height of the viewport.

You can also use the min-h-{size} and max-h-{size} classes to set a minimum and maximum height, respectively.

Example

Here's an example of how to use the height utility classes:

<div class="h-32 bg-blue-200">
  This div has a height of 32 pixels.
</div>

<div class="min-h-screen bg-red-200">
  This div has a minimum height of the screen height.
</div>

<div class="max-h-64 bg-yellow-200">
  This div has a maximum height of 64 pixels.
</div>

Output

The output of the above example will look like this:

Explanation

In the above example, we have used the h-32 class to set the height of the first div to 32px. We have also used the min-h-screen class to set the minimum height of the second div to the height of the screen, and the max-h-64 class to set the maximum height of the third div to 64px.

Use

You can use the height utility classes to set the height of various elements such as divs, images, and buttons. You can also use the min-h-{size} and max-h-{size} classes to set a minimum and maximum height, respectively.

Important Points

• When using the height utility classes, make sure that the element is a block-level element.
• The height utility classes may not work as expected when used on floated or absolutely positioned elements.

Summary

The height utility classes in Tailwind CSS are used to set the height of an element. The height utility classes include h-{size} to set the height to a specific pixel value, min-h-{size} to set a minimum height, and max-h-{size} to set a maximum height. You can use these classes to set the height of various elements such as divs, images, and buttons. However, make sure that the element is a block-level element and the height utility classes may not work on floated or absolutely positioned elements.