Width

Visit https://tailwindcss.com/docs/width (opens new window) for more information.

Class	Properties
.w-0	width: 0px;
.w-1	width: 1px;
.w-2	width: 0.125rem;
.w-4	width: 0.25rem;
.w-6	width: 0.375rem;
.w-8	width: 0.5rem;
.w-10	width: 0.625rem;
.w-12	width: 0.75rem;
.w-14	width: 0.875rem;
.w-16	width: 1rem;
.w-18	width: 1.125rem;
.w-20	width: 1.25rem;
.w-24	width: 1.5rem;
.w-28	width: 1.75rem;
.w-32	width: 2rem;
.w-36	width: 2.25rem;
.w-40	width: 2.5rem;
.w-44	width: 2.75rem;
.w-48	width: 3rem;
.w-56	width: 3.5rem;
.w-64	width: 4rem;
.w-72	width: 4.5rem;
.w-80	width: 5rem;
.w-96	width: 6rem;
.w-112	width: 7rem;
.w-128	width: 8rem;
.w-144	width: 9rem;
.w-160	width: 10rem;
.w-176	width: 11rem;
.w-192	width: 12rem;
.w-208	width: 13rem;
.w-224	width: 14rem;
.w-240	width: 15rem;
.w-256	width: 16rem;
.w-288	width: 18rem;
.w-320	width: 20rem;
.w-384	width: 24rem;
.w-auto	width: auto;
.w-1/2	width: 50%;
.w-1/3	width: 33.333333%;
.w-2/3	width: 66.666667%;
.w-1/4	width: 25%;
.w-2/4	width: 50%;
.w-3/4	width: 75%;
.w-1/5	width: 20%;
.w-2/5	width: 40%;
.w-3/5	width: 60%;
.w-4/5	width: 80%;
.w-1/6	width: 16.666667%;
.w-2/6	width: 33.333333%;
.w-3/6	width: 50%;
.w-4/6	width: 66.666667%;
.w-5/6	width: 83.333333%;
.w-1/12	width: 8.333333%;
.w-2/12	width: 16.666667%;
.w-3/12	width: 25%;
.w-4/12	width: 33.333333%;
.w-5/12	width: 41.666667%;
.w-6/12	width: 50%;
.w-7/12	width: 58.333333%;
.w-8/12	width: 66.666667%;
.w-9/12	width: 75%;
.w-10/12	width: 83.333333%;
.w-11/12	width: 91.666667%;
.w-full	width: 100%;
.w-screen	width: 100vw;
.w-min	width: min-content;
.w-max	width: max-content;

Examples

This div is set to 75% width.

<div class="w-9/12 bg-primary-inverted text-primary-inverted p-12 mt-16">This div is set to 75% width.</div>