Tailwind Height: Everything You Need to Know

In this article, we will explore Tailwind height classes and how to use them in your projects with examples.

The height property is used to set the height of an element, such as a <div> or an <img> tag.

The height of an element can be specified using absolute or relative units.

Tailwind Height

These classes are based on a simple naming convention that starts with the prefix h- followed by a number that represents the height in pixels.

Syntax

<element class="h-40">...</element>

Tailwind provides various classes that you can use to set the height of an element without having to write custom CSS.

Table Of Content-

Tailwind Height classes

The following are some of the most commonly used Tailwind height classes:

ClassesOverview
h-0The height is set to zero.
h-pxEquivalent to custom CSS height 1px.
h-0.5This class defines the height of an element as 0.125rem or 2px.
h-1A height of 0.25rem or 4px is defined by this class.
h-1.5Using this class, an element’s height is defined as 0.375rem or 6px.
h-2Height of an element in this class is 0.5rem or 8 pixels.
h-2.5Elements using this class have a height of 0.625rem (10px).
h-3The height of an element is specified as 0.75rem or 12px.
h-3.5This class defines an element’s height as 0.875rem or 14 px.
h-4Using this class, you can set an element’s height to 1rem or 16px.
h-5Using this class, an element will have a height of 1.25rem or 20 pixels.
h-6In this case, the element will have a height of 1.5rem or 24px.
h-7This class sets the height of an element to 1.75rem or 28px.
h-8An element’s height is set to 2rem or 32px with this class.
h-9A height of 2.25rem or 36px is applied to an element using this class.
h-10This class sets an element’s height to 2.5rem (40px).
h-11When this class is used, an element’s height is set to 44px or 2.75rem.
h-12A class with this name sets the height of an element to 3rem or 48px.
h-14It sets the height of an element to 3.5rem or 56px.
h-16An element’s height is set to 4rem or 64px by using this class.
h-20Using this class, an element’s height is defined as 5rem or 80px.
h-24This class defines the height of an element as 6rem or 96px.
h-28An element using this class has a height of 7rem or 112px.
h-32The height of an element is 8rem, or 128px, when this class is applied.
h-36This class applies a height of 9rem or 144px to an element.
h-40Using this class, an element will have a height of 10rem or 160px.
h-44This class specifies the height of an element as 11rem or 176px.
h-48A height of 12rem or 192px is specified by this class.
h-52An element with this class has a height of 13rem or 208px.
h-56Elements in this class are defined to have a height of 14rem or 224px.
h-60Using this class, an element has a height of 15rem or 240px.
h-64Elements using this class have a height of 16rem or 256px.
h-72Using this class, elements are specified as 18rem or 288px tall.
h-80The height of an element is specified as 20rem or 320px.
h-96A height of 24rem or 384px is defined by this class.
h-autoThis class sets the height of an element to its default, automatic size based on its content.
h-1/2This class sets the height of an element to 50% of its parent container’s height.
h-1/3In this class, an element’s height is set to 33.33% of its parent container’s height.
h-2/3An element with this class has a height of 66.67% of its parent container.
h-1/4Elements of this class have a height of 25% of their parent containers.
h-2/4This class sets the height of an element to 50% of its parent container’s height.
h-3/4The height of an element in this class is set to 75% of that of its parent container.
h-1/5An element of this class has a height that is 20% of that of its parent container.
h-2/5Element height is set to 40% of its parent container height.
h-3/5Element height will be set to 60% of its parent container’s height.
h-4/5Using this class, elements are set to 80% of their parent container’s height.
h-1/6This class sets an element’s height to 16.67% of its parent container’s height.
h-2/6In this class, the height of an element is set to 33.33% of its parent container’s height.
h-3/6This class sets the height of an element to 50% of its parent container’s height.
h-4/6An element’s height is set to 66.67% of the height of its parent container according to this class.
h-5/6This class sets an element’s height to 83.33% of its parent container’s height.
h-fullThis class sets the height of an element to 100% of its parent container’s height.
h-screenThis class specifies the height of an element to be equal to the height of the screen.
h-minThis will set the height of an element to the minimum height required to contain its content.
h-maxThis will set the height of the element to the maximum height required to contain its content.
h-fitThe height of an element will adjust based on the height of the element’s content.

Absolute units

Absolute units are units of measurement in CSS that are not based on the relative size of other elements.

They have fixed values and remain constant regardless of the size or dimensions of the viewport or other elements on the page.

The most common absolute units are pixels (px), points (pt), inches (in), centimeters (cm), and millimeters (mm).

Below example demonstrates the usage of Tailwind height utility using absolute units:

Example: 

<!DOCTYPE html> <html><head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2">Using height utility in Tailwind CSS</p> <p class="font-medium my-4 text-gray-500 text-sm">Using absolute units</p> <div class="flex flex-wrap-reverse p-4 space-x-2 h-64 bg-gray-200 font-medium rounded"> <div class="h-8 w-12 bg-gray-400 rounded-lg">h-8</div> <div class="h-12 w-12 bg-gray-400 rounded-lg">h-12</div> <div class="h-16 w-12 bg-gray-400 rounded-lg">h-16</div> <div class="h-20 w-12 bg-gray-400 rounded-lg">h-20</div> <div class="h-24 w-12 bg-gray-400 rounded-lg">h-24</div> <div class="h-32 w-12 bg-gray-400 rounded-lg">h-32</div> <div class="h-40 w-12 bg-gray-400 rounded-lg">h-40</div> <div class="h-48 w-12 bg-gray-400 rounded-lg">h-48</div> <div class="h-52 w-12 bg-gray-400 rounded-lg">h-52</div> <div class="h-56 w-12 bg-gray-400 rounded-lg">h-56</div> </div> </body> </html>

Relative units

Relative units are CSS units that are relative to another property or value, typically the font size of the element or the width of its parent container.

They are particularly useful for creating flexible, responsive designs that adapt to different screen sizes and devices.

Syntax

<element class="h-2/3">...</element>

This example illustrates the use case of Tailwind height property using relative units:

Example: 

<!DOCTYPE html> <html><head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2">Using height utility in Tailwind CSS</p> <p class="font-medium my-4 text-gray-500 text-sm">Using relative units</p> <div class="flex flex-wrap-reverse p-4 space-x-2 h-64 bg-gray-200 font-medium rounded"> <div class="h-1/3 w-12 bg-gray-400 rounded-lg">h-1/3</div> <div class="h-2/3 w-12 bg-gray-400 rounded-lg">h-2/3</div> <div class="h-1/2 w-12 bg-gray-400 rounded-lg">h-1/2</div> <div class="h-3/4 w-12 bg-gray-400 rounded-lg">h-3/4</div> <div class="h-5/6 w-12 bg-gray-400 rounded-lg">h-5/6</div> <div class="h-3/6 w-12 bg-gray-400 rounded-lg">h-3/6</div> <div class="h-4/6 w-12 bg-gray-400 rounded-lg">h-4/6</div> <div class="h-3/5 w-12 bg-gray-400 rounded-lg">h-3/5</div> <div class="h-4/5 w-12 bg-gray-400 rounded-lg">h-4/5</div> <div class="h-2/4 w-12 bg-gray-400 rounded-lg">h-2/4</div> </div> </body> </html>
In the following example, some relative units that were not included in the earlier example are used:

Example: 

<!DOCTYPE html> <html><head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2">Using height utility in Tailwind CSS</p> <p class="font-medium my-4 text-gray-500 text-sm">Using relative units</p> <div class="flex flex-wrap-reverse p-4 space-x-2 h-64 bg-gray-200 font-medium rounded"> <div class="h-full w-12 bg-gray-400 rounded-lg">h-full</div> <div class="h-min w-12 bg-gray-400 rounded-lg">h-min</div> <div class="h-max w-12 bg-gray-400 rounded-lg">h-max</div> <div class="h-auto w-12 bg-gray-400 rounded-lg">h-auto</div> <div class="h-fit w-12 bg-gray-400 rounded-lg">h-fit</div> </div> </body> </html>
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *