CSS to Tailwind Converter

Sizing

height to Tailwind

Height mirrors width, with h-screen for 100vh and h-full for 100%.

The 135 mappings below are read straight out of Tailwind v4.3.3, not maintained by hand, so this is what the converter will actually produce for height.

height values and their classes

CSSTailwind
height: 0;h-0
height: 0;size-0also sets width
height: 0.125rem;h-0.5
height: 0.125rem;size-0.5also sets width
height: 0.25rem;h-1
height: 0.25rem;size-1also sets width
height: 0.375rem;h-1.5
height: 0.375rem;size-1.5also sets width
height: 0.5rem;h-2
height: 0.5rem;size-2also sets width
height: 0.625rem;h-2.5
height: 0.625rem;size-2.5also sets width
height: 0.75rem;h-3
height: 0.75rem;size-3also sets width
height: 0.875rem;h-3.5
height: 0.875rem;size-3.5also sets width
height: 1lh;h-lh
height: 1px;h-px
height: 1px;size-pxalso sets width
height: 1rem;h-4
height: 1rem;size-4also sets width
height: 1.25rem;h-5
height: 1.25rem;size-5also sets width
height: 1.5rem;h-6
height: 1.5rem;size-6also sets width
height: 1.75rem;h-7
height: 1.75rem;size-7also sets width
height: 2rem;h-8
height: 2rem;size-8also sets width
height: 2.25rem;h-9
height: 2.25rem;size-9also sets width
height: 2.5rem;h-10
height: 2.5rem;size-10also sets width
height: 2.75rem;h-11
height: 2.75rem;size-11also sets width
height: 3rem;h-12
height: 3rem;size-12also sets width
height: 3.5rem;h-14
height: 3.5rem;size-14also sets width
height: 4rem;h-16
height: 4rem;size-16also sets width
height: 5rem;h-20
height: 5rem;size-20also sets width
height: 6rem;h-24
height: 6rem;size-24also sets width
height: 7rem;h-28
height: 7rem;size-28also sets width
height: 8rem;h-32
height: 8rem;size-32also sets width
height: 8.333333%;h-1/12
height: 8.333333%;size-1/12also sets width
height: 9rem;h-36
height: 9rem;size-36also sets width
height: 10rem;h-40
height: 10rem;size-40also sets width
height: 11rem;h-44
height: 11rem;size-44also sets width
height: 12rem;h-48
height: 12rem;size-48also sets width
height: 13rem;h-52
height: 13rem;size-52also sets width
height: 14rem;h-56
height: 14rem;size-56also sets width
height: 15rem;h-60
height: 15rem;size-60also sets width
height: 16rem;h-64
height: 16rem;size-64also sets width
height: 16.666667%;h-1/6
height: 16.666667%;size-1/6also sets width
height: 16.666667%;size-2/12also sets width
height: 18rem;h-72
height: 18rem;size-72also sets width
height: 20%;h-1/5
height: 20%;size-1/5also sets width
height: 20rem;h-80
height: 20rem;size-80also sets width
height: 24rem;h-96
height: 24rem;size-96also sets width
height: 25%;h-1/4
height: 25%;size-1/4also sets width
height: 25%;size-3/12also sets width
height: 33.333333%;h-1/3
height: 33.333333%;size-1/3also sets width
height: 33.333333%;size-2/6also sets width
height: 33.333333%;size-4/12also sets width
height: 40%;h-2/5
height: 40%;size-2/5also sets width
height: 41.666667%;h-5/12
height: 41.666667%;size-5/12also sets width
height: 50%;h-1/2
height: 50%;size-1/2also sets width
height: 50%;size-2/4also sets width
height: 50%;size-3/6also sets width
height: 50%;size-6/12also sets width
height: 58.333333%;h-7/12
height: 58.333333%;size-7/12also sets width
height: 60%;h-3/5
height: 60%;size-3/5also sets width
height: 66.666667%;h-2/3
height: 66.666667%;size-2/3also sets width
height: 66.666667%;size-4/6also sets width
height: 66.666667%;size-8/12also sets width
height: 75%;h-3/4
height: 75%;size-3/4also sets width
height: 75%;size-9/12also sets width
height: 80%;h-4/5
height: 80%;size-4/5also sets width
height: 83.333333%;h-5/6
height: 83.333333%;size-10/12also sets width
height: 83.333333%;size-5/6also sets width
height: 91.666667%;h-11/12
height: 91.666667%;size-11/12also sets width
height: 100%;h-full
height: 100%;size-fullalso sets width
height: 100dvh;h-dvh
height: 100dvh;size-dvhalso sets width
height: 100dvw;h-dvw
height: 100dvw;size-dvwalso sets width
height: 100lvh;h-lvh
height: 100lvh;size-lvhalso sets width
height: 100lvw;h-lvw
height: 100lvw;size-lvwalso sets width
height: 100svh;h-svh
height: 100svh;size-svhalso sets width
height: 100svw;h-svw
height: 100svw;size-svwalso sets width
height: 100vh;h-screen
height: auto;h-auto
height: auto;size-autoalso sets width
height: fit-content;h-fit
height: fit-content;size-fitalso sets width
height: max-content;h-max
height: max-content;size-maxalso sets width
height: min-content;h-min
height: min-content;size-minalso sets width

The spacing scale

height is written with h-* and size-*, which counts in steps of 0.25rem. The step number is the multiplier, so the class number is the value divided by that step rather than a pixel count.

Values that are not on the scale

Anything without a named class is written as an arbitrary value in square brackets. The converter falls back to this rather than rounding your CSS to the nearest class, because silently changing a value is worse than an ugly class name.

h-[your value]

Other sizing properties

Converting a whole stylesheet?

Paste it into the converter and get every rule at once, shorthands expanded, media queries turned into breakpoint variants, and the parts that have no Tailwind equivalent flagged rather than dropped.

Open the converter