Tailwind is a popular CSS framework for designing layouts faster and more efficiently. It provides various utility classes for controlling the design parameters of the elements. For instance, a “Full Height” class will provide an element with a height equal to its parent container. To do that, the user has to mention the “full-height” class in the “class” attribute of the element.

This article will provide the procedure for assigning a full height to an element using Tailwind.

How to Assign Full Height to Element Using Tailwind?

The full height utility class will provide the element a “100%” height of its parent element. However, the parent element must have an assigned height property as well. The following syntax is used for assigning the full height to an element in Tailwind:

Let’s have a look at the below-stated code for a better understanding of the “full-height” utility.

A parent “div” will be created with a specific height to view the effect of the “full-height” utility on the child “div”:

The explanation for the Tailwind classes used in the above code is as follows:

• The “flex” class is used to create a container that contains the child elements.
• The “justify-center” class places the items in the center of the parent element.
• The “bg-{color}-{number}” class is responsible for setting the background of the element to the designated color.
• The “h-96” class sets the fixed height of the container element to “384px”.
• The “w-96” class sets the fixed width of the child div element to “384px”.
• The “rounded-xl” class makes the corners of the element rounded.
• The “py-2” class provides the element with top and bottom padding of “8px”.
• The “text-center” class aligns the text content in the center.
• The “shadow-lg” class provides the element with a large shadow.
• The “h-full” class provides the element a height “100%” equal to its parent element i.e., “h-96”.

The output for the above-explained code is as follows:

From the above output, the inner element has a “100%” height of its parent container. That is all about assigning the full height to a Tailwind element.

Conclusion

The full-height utility in Tailwind provides the element with the “100%” height of its parent container. The syntax for provident the full height to an element is “h-full”. If there is no parent container, the element will take 100% of the viewport height which is the size of the client screen. This article has provided the procedure for assigning full height to a Tailwind element.