Landings

Tailwind CSS

Height

Utilities for setting the height of an element.

ClassProperties
h-0height: 0px;
h-pxheight: 1px;
h-0.5height: 0.125rem; /* 2px */
h-1height: 0.25rem; /* 4px */
h-1.5height: 0.375rem; /* 6px */
h-2height: 0.5rem; /* 8px */
h-2.5height: 0.625rem; /* 10px */
h-3height: 0.75rem; /* 12px */
h-3.5height: 0.875rem; /* 14px */
h-4height: 1rem; /* 16px */
h-5height: 1.25rem; /* 20px */
h-6height: 1.5rem; /* 24px */
h-7height: 1.75rem; /* 28px */
h-8height: 2rem; /* 32px */
h-9height: 2.25rem; /* 36px */
h-10height: 2.5rem; /* 40px */
h-11height: 2.75rem; /* 44px */
h-12height: 3rem; /* 48px */
h-14height: 3.5rem; /* 56px */
h-16height: 4rem; /* 64px */
h-20height: 5rem; /* 80px */
h-24height: 6rem; /* 96px */
h-28height: 7rem; /* 112px */
h-32height: 8rem; /* 128px */
h-36height: 9rem; /* 144px */
h-40height: 10rem; /* 160px */
h-44height: 11rem; /* 176px */
h-48height: 12rem; /* 192px */
h-52height: 13rem; /* 208px */
h-56height: 14rem; /* 224px */
h-60height: 15rem; /* 240px */
h-64height: 16rem; /* 256px */
h-72height: 18rem; /* 288px */
h-80height: 20rem; /* 320px */
h-96height: 24rem; /* 384px */
h-autoheight: auto;
h-1/2height: 50%;
h-1/3height: 33.333333%;
h-2/3height: 66.666667%;
h-1/4height: 25%;
h-2/4height: 50%;
h-3/4height: 75%;
h-1/5height: 20%;
h-2/5height: 40%;
h-3/5height: 60%;
h-4/5height: 80%;
h-1/6height: 16.666667%;
h-2/6height: 33.333333%;
h-3/6height: 50%;
h-4/6height: 66.666667%;
h-5/6height: 83.333333%;
h-fullheight: 100%;
h-screenheight: 100vh;
h-svhheight: 100svh;
h-lvhheight: 100lvh;
h-dvhheight: 100dvh;
h-minheight: min-content;
h-maxheight: max-content;
h-fitheight: fit-content;