Fixed widths from the spacing scale: w-0 through w-96. This family contains 61 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
w-0width: 0px;
w-1width: 0.25rem;
w-2width: 0.5rem;
w-3width: 0.75rem;
w-4width: 1rem;
w-5width: 1.25rem;
w-6width: 1.5rem;
w-7width: 1.75rem;
w-8width: 2rem;
w-9width: 2.25rem;
w-10width: 2.5rem;
w-11width: 2.75rem;
w-12width: 3rem;
w-14width: 3.5rem;
w-16width: 4rem;
w-20width: 5rem;
w-24width: 6rem;
w-28width: 7rem;
w-32width: 8rem;
w-36width: 9rem;
w-40width: 10rem;
w-44width: 11rem;
w-48width: 12rem;
w-52width: 13rem;
w-56width: 14rem;
w-60width: 15rem;
w-64width: 16rem;
w-72width: 18rem;
w-80width: 20rem;
w-96width: 24rem;
w-pxwidth: 1px;
w-0.5width: 0.125rem;
w-1.5width: 0.375rem;
w-2.5width: 0.625rem;
w-3.5width: 0.875rem;
w-1/2width: 50%;
w-1/3width: 33.333333%;
w-2/3width: 66.666667%;
w-1/4width: 25%;
w-2/4width: 50%;
w-3/4width: 75%;
w-1/5width: 20%;
w-2/5width: 40%;
w-3/5width: 60%;
w-4/5width: 80%;
w-1/6width: 16.666667%;
w-2/6width: 33.333333%;
w-3/6width: 50%;
w-4/6width: 66.666667%;
w-5/6width: 83.333333%;
w-1/12width: 8.333333%;
w-2/12width: 16.666667%;
w-3/12width: 25%;
w-4/12width: 33.333333%;
w-5/12width: 41.666667%;
w-6/12width: 50%;
w-7/12width: 58.333333%;
w-8/12width: 66.666667%;
w-9/12width: 75%;
w-10/12width: 83.333333%;

…and 1 more in this family — search by class name to find the exact one.

Example#

example
html
<div class="w-64 p-4">16rem wide</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Sidebar standards: w-64 (16rem) or w-72
  • Avatars: w-8…w-16

Common mistakes#

  • Fixed widths on phones — pair with max-w-full

utilities/layout/aspect-ratio|Aspect ratio · utilities/spacing/spacing-scale|Spacing scale