CSS to Tailwind Converter

Sizing

width to Tailwind

Width draws on the spacing scale, a set of fractions, and viewport keywords, so both w-64 and w-1/3 are ordinary utilities.

The 143 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 width.

width values and their classes

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

The spacing scale

width is written with size-* and w-*, 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.

w-[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