w-full, w-1/2, w-screen, w-fit — fractions and intrinsic sizing. This family contains 35 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
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-svw | width: 100svw; |
w-lvw | width: 100lvw; |
w-dvw | width: 100dvw; |
w-min | width: min-content; |
w-max | width: max-content; |
w-fit | width: fit-content; |
Example#
example
<div class="w-full md:w-1/2 lg:w-1/3">Responsive thirds</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#
- Fractions go to twelfths: w-5/12 etc.
- w-fit shrinks to content; w-min to the minimum
Common mistakes#
- w-screen adds a horizontal scrollbar when body has padding
Related#
utilities/layout/aspect-ratio|Aspect ratio · utilities/spacing/spacing-scale|Spacing scale