min-w-* and max-w-* constrain widths: max-w-sm through max-w-7xl, max-w-prose, min-w-full… This family contains 101 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
min-w-0 | min-width: 0px; |
min-w-1 | min-width: 0.25rem; |
min-w-2 | min-width: 0.5rem; |
min-w-3 | min-width: 0.75rem; |
min-w-4 | min-width: 1rem; |
min-w-5 | min-width: 1.25rem; |
min-w-6 | min-width: 1.5rem; |
min-w-7 | min-width: 1.75rem; |
min-w-8 | min-width: 2rem; |
min-w-9 | min-width: 2.25rem; |
min-w-10 | min-width: 2.5rem; |
min-w-11 | min-width: 2.75rem; |
min-w-12 | min-width: 3rem; |
min-w-14 | min-width: 3.5rem; |
min-w-16 | min-width: 4rem; |
min-w-20 | min-width: 5rem; |
min-w-24 | min-width: 6rem; |
min-w-28 | min-width: 7rem; |
min-w-32 | min-width: 8rem; |
min-w-36 | min-width: 9rem; |
min-w-40 | min-width: 10rem; |
min-w-44 | min-width: 11rem; |
min-w-48 | min-width: 12rem; |
min-w-52 | min-width: 13rem; |
min-w-56 | min-width: 14rem; |
min-w-60 | min-width: 15rem; |
min-w-64 | min-width: 16rem; |
min-w-72 | min-width: 18rem; |
min-w-80 | min-width: 20rem; |
min-w-96 | min-width: 24rem; |
min-w-px | min-width: 1px; |
min-w-0.5 | min-width: 0.125rem; |
min-w-1.5 | min-width: 0.375rem; |
min-w-2.5 | min-width: 0.625rem; |
min-w-3.5 | min-width: 0.875rem; |
min-w-full | min-width: 100%; |
min-w-min | min-width: min-content; |
min-w-max | min-width: max-content; |
min-w-fit | min-width: fit-content; |
max-w-0 | max-width: 0px; |
max-w-1 | max-width: 0.25rem; |
max-w-2 | max-width: 0.5rem; |
max-w-3 | max-width: 0.75rem; |
max-w-4 | max-width: 1rem; |
max-w-5 | max-width: 1.25rem; |
max-w-6 | max-width: 1.5rem; |
max-w-7 | max-width: 1.75rem; |
max-w-8 | max-width: 2rem; |
max-w-9 | max-width: 2.25rem; |
max-w-10 | max-width: 2.5rem; |
max-w-11 | max-width: 2.75rem; |
max-w-12 | max-width: 3rem; |
max-w-14 | max-width: 3.5rem; |
max-w-16 | max-width: 4rem; |
max-w-20 | max-width: 5rem; |
max-w-24 | max-width: 6rem; |
max-w-28 | max-width: 7rem; |
max-w-32 | max-width: 8rem; |
max-w-36 | max-width: 9rem; |
max-w-40 | max-width: 10rem; |
…and 41 more in this family — search by class name to find the exact one.
Example#
example
<article class="max-w-prose mx-auto">Readable line length</article>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#
- max-w-prose ≈ 65ch — the reading-width standard
- max-w-screen-xl centers wide layouts
Related#
utilities/layout/aspect-ratio|Aspect ratio · utilities/spacing/spacing-scale|Spacing scale