xxxxxxxxxx
w-0 width: 0px;
w-px width: 1px;
w-0.5 width: 0.125rem; /* 2px */
w-1 width: 0.25rem; /* 4px */
w-1.5 width: 0.375rem; /* 6px */
w-2 width: 0.5rem; /* 8px */
w-2.5 width: 0.625rem; /* 10px */
w-3 width: 0.75rem; /* 12px */
w-3.5 width: 0.875rem; /* 14px */
w-4 width: 1rem; /* 16px */
w-5 width: 1.25rem; /* 20px */
w-6 width: 1.5rem; /* 24px */
w-7 width: 1.75rem; /* 28px */
w-8 width: 2rem; /* 32px */
w-9 width: 2.25rem; /* 36px */
w-10 width: 2.5rem; /* 40px */
w-11 width: 2.75rem; /* 44px */
w-12 width: 3rem; /* 48px */
w-14 width: 3.5rem; /* 56px */
w-16 width: 4rem; /* 64px */
w-20 width: 5rem; /* 80px */
w-24 width: 6rem; /* 96px */
w-28 width: 7rem; /* 112px */
w-32 width: 8rem; /* 128px */
w-36 width: 9rem; /* 144px */
w-40 width: 10rem; /* 160px */
w-44 width: 11rem; /* 176px */
w-48 width: 12rem; /* 192px */
w-52 width: 13rem; /* 208px */
w-56 width: 14rem; /* 224px */
w-60 width: 15rem; /* 240px */
w-64 width: 16rem; /* 256px */
w-72 width: 18rem; /* 288px */
w-80 width: 20rem; /* 320px */
w-96 width: 24rem; /* 384px */
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;
w-fit width: fit-content;
xxxxxxxxxx
class rem-width /*pixel width*/
w-0 width: 0px;
w-px width: 1px;
w-0.5 width: 0.125rem; /* 2px */
w-1 width: 0.25rem; /* 4px */
w-1.5 width: 0.375rem; /* 6px */
w-2 width: 0.5rem; /* 8px */
w-2.5 width: 0.625rem; /* 10px */
w-3 width: 0.75rem; /* 12px */
w-3.5 width: 0.875rem; /* 14px */
w-4 width: 1rem; /* 16px */
w-5 width: 1.25rem; /* 20px */
w-6 width: 1.5rem; /* 24px */
w-7 width: 1.75rem; /* 28px */
w-8 width: 2rem; /* 32px */
w-9 width: 2.25rem; /* 36px */
w-10 width: 2.5rem; /* 40px */
w-11 width: 2.75rem; /* 44px */
w-12 width: 3rem; /* 48px */
w-14 width: 3.5rem; /* 56px */
w-16 width: 4rem; /* 64px */
w-20 width: 5rem; /* 80px */
w-24 width: 6rem; /* 96px */
w-28 width: 7rem; /* 112px */
w-32 width: 8rem; /* 128px */
w-36 width: 9rem; /* 144px */
w-40 width: 10rem; /* 160px */
w-44 width: 11rem; /* 176px */
w-48 width: 12rem; /* 192px */
w-52 width: 13rem; /* 208px */
w-56 width: 14rem; /* 224px */
w-60 width: 15rem; /* 240px */
w-64 width: 16rem; /* 256px */
w-72 width: 18rem; /* 288px */
w-80 width: 20rem; /* 320px */
w-96 width: 24rem; /* 384px */
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;
w-fit width: fit-content;
xxxxxxxxxx
scale-0 transform: scale(0);
scale-x-0 transform: scaleX(0);
scale-y-0 transform: scaleY(0);
scale-50 transform: scale(.5);
scale-x-50 transform: scaleX(.5);
scale-y-50 transform: scaleY(.5);
scale-75 transform: scale(.75);
scale-x-75 transform: scaleX(.75);
scale-y-75 transform: scaleY(.75);
scale-90 transform: scale(.9);
scale-x-90 transform: scaleX(.9);
scale-y-90 transform: scaleY(.9);
scale-95 transform: scale(.95);
scale-x-95 transform: scaleX(.95);
scale-y-95 transform: scaleY(.95);
scale-100 transform: scale(1);
scale-x-100 transform: scaleX(1);
scale-y-100 transform: scaleY(1);
scale-105 transform: scale(1.05);
scale-x-105 transform: scaleX(1.05);
scale-y-105 transform: scaleY(1.05);
scale-110 transform: scale(1.1);
scale-x-110 transform: scaleX(1.1);
scale-y-110 transform: scaleY(1.1);
scale-125 transform: scale(1.25);
scale-x-125 transform: scaleX(1.25);
scale-y-125 transform: scaleY(1.25);
scale-150 transform: scale(1.5);
scale-x-150 transform: scaleX(1.5);
scale-y-150 transform: scaleY(1.5);
xxxxxxxxxx
<p class="text-xs ...">The quick brown fox </p>
<p class="text-sm ...">The quick brown fox </p>
<p class="text-base ...">The quick brown fox </p>
<p class="text-lg ...">The quick brown fox </p>
<p class="text-xl ...">The quick brown fox </p>
<p class="text-2xl ...">The quick brown fox </p>
<p class="text-3xl ...">The quick brown fox </p>
<p class="text-4xl ...">The quick brown fox </p>
<p class="text-5xl ...">The quick brown fox </p>
<p class="text-6xl ...">The quick brown fox </p>
<p class="text-7xl ...">The quick brown fox </p>
<p class="text-8xl ...">The quick brown fox </p>
<p class="text-9xl ...">The quick brown fox </p>
xxxxxxxxxx
Small ( sm: )—640 pixels and up.
Medium ( md: )—768 pixels and up.
Large ( lg: )—1024 pixels and up.
Extra large ( xl: )—1280 pixels and up.
Extra extra large ( 2xl: )—1536 pixels and up.
xxxxxxxxxx
<div class="w-4"></div> // w-4 = 1rem, w-8 = 2rem
<div class="w-1/2"></div> // w-1/2 = 50% , w-1/3 = 33.333% , w-1/4 = 25%