ContextQMD
Back to Tailwindcss

Max Width

src/docs/max-width.mdx

latest8.8 KB
Original Source

import dedent from "dedent"; import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "max-width"; export const description = "Utilities for setting the maximum width of an element.";

<ApiTable rows={[ ["max-w-<number>", "max-width: calc(var(--spacing) * <number>);"], ["max-w-<fraction>", "max-width: calc(<fraction> * 100%);"], ["max-w-3xs", "max-width: var(--container-3xs); /* 16rem (256px) /"], ["max-w-2xs", "max-width: var(--container-2xs); / 18rem (288px) /"], ["max-w-xs", "max-width: var(--container-xs); / 20rem (320px) /"], ["max-w-sm", "max-width: var(--container-sm); / 24rem (384px) /"], ["max-w-md", "max-width: var(--container-md); / 28rem (448px) /"], ["max-w-lg", "max-width: var(--container-lg); / 32rem (512px) /"], ["max-w-xl", "max-width: var(--container-xl); / 36rem (576px) /"], ["max-w-2xl", "max-width: var(--container-2xl); / 42rem (672px) /"], ["max-w-3xl", "max-width: var(--container-3xl); / 48rem (768px) /"], ["max-w-4xl", "max-width: var(--container-4xl); / 56rem (896px) /"], ["max-w-5xl", "max-width: var(--container-5xl); / 64rem (1024px) /"], ["max-w-6xl", "max-width: var(--container-6xl); / 72rem (1152px) /"], ["max-w-7xl", "max-width: var(--container-7xl); / 80rem (1280px) */"], ["max-w-none", "max-width: none;"], ["max-w-px", "max-width: 1px;"], ["max-w-full", "max-width: 100%;"], ["max-w-dvw", "max-width: 100dvw;"], ["max-w-dvh", "max-width: 100dvh;"], ["max-w-lvw", "max-width: 100lvw;"], ["max-w-lvh", "max-width: 100lvh;"], ["max-w-svw", "max-width: 100svw;"], ["max-w-svh", "max-width: 100svh;"], ["max-w-screen", "max-width: 100vw;"], ["max-w-min", "max-width: min-content;"], ["max-w-max", "max-width: max-content;"], ["max-w-fit", "max-width: fit-content;"], [ "container", dedent width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } , ], ["max-w-(<custom-property>)", "max-width: var(<custom-property>);"], ["max-w-[<value>]", "max-width: <value>;"], ]} />

Examples

Basic example

Use max-w-<number> utilities like max-w-24 and max-w-64 to set an element to a fixed maximum width based on the spacing scale:

<Figure hint="Resize the example to see the expected behavior"> <Example resizable> { <div className="align-start grid gap-4 text-center font-mono text-xs font-bold text-white"> <div className="relative grid w-full rounded-lg"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative max-w-96 rounded-lg bg-blue-500 px-4 py-2">max-w-96</div> </div> <div className="relative grid w-full rounded-lg"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative max-w-80 rounded-lg bg-blue-500 px-4 py-2">max-w-80</div> </div> <div className="relative grid w-full rounded-lg"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative max-w-64 rounded-lg bg-blue-500 px-4 py-2">max-w-64</div> </div> <div className="relative grid w-full rounded-lg"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative max-w-48 rounded-lg bg-blue-500 px-4 py-2">max-w-48</div> </div> <div className="relative grid w-full rounded-lg"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative max-w-40 rounded-lg bg-blue-500 px-4 py-2">max-w-40</div> </div> <div className="relative grid w-full rounded-lg"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative max-w-32 rounded-lg bg-blue-500 px-4 py-2">max-w-32</div> </div> <div className="relative grid w-full rounded-lg"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative max-w-24 rounded-lg bg-blue-500 px-4 py-2">max-w-24</div> </div> </div> } </Example>
html
<!-- [!code classes:max-w-96,max-w-80,max-w-64,max-w-48,max-w-40,max-w-32,max-w-24] -->
<div class="w-full max-w-96 ...">max-w-96</div>
<div class="w-full max-w-80 ...">max-w-80</div>
<div class="w-full max-w-64 ...">max-w-64</div>
<div class="w-full max-w-48 ...">max-w-48</div>
<div class="w-full max-w-40 ...">max-w-40</div>
<div class="w-full max-w-32 ...">max-w-32</div>
<div class="w-full max-w-24 ...">max-w-24</div>
</Figure>

Using a percentage

Use max-w-full or max-w-<fraction> utilities like max-w-1/2 and max-w-2/5 to give an element a percentage-based maximum width:

<Figure hint="Resize the example to see the expected behavior"> <Example resizable> { <div className="align-start grid gap-4 text-center font-mono text-xs font-bold text-white"> <div className="relative grid w-full rounded-lg"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative max-w-9/10 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-9/10</div> </div> <div className="relative grid w-full rounded-lg"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative max-w-3/4 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-3/4</div> </div> <div className="relative grid w-full rounded-lg"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative max-w-1/2 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-1/2</div> </div> <div className="relative grid w-full rounded-lg"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative max-w-1/3 truncate rounded-lg bg-indigo-500 px-4 py-2 text-nowrap">max-w-1/3</div> </div> </div> } </Example>
html
<!-- [!code classes:max-w-3/4,max-w-9/10,max-w-1/2,max-w-1/3] -->
<div class="w-full max-w-9/10 ...">max-w-9/10</div>
<div class="w-full max-w-3/4 ...">max-w-3/4</div>
<div class="w-full max-w-1/2 ...">max-w-1/2</div>
<div class="w-full max-w-1/3 ...">max-w-1/3</div>
</Figure>

Using the container scale

Use utilities like max-w-sm and max-w-xl to set an element to a fixed maximum width based on the container scale:

<Figure hint="Resize the example to see the expected behavior"> <Example resizable> { <div className="dark:highlight-white/5 relative mx-auto flex max-w-md items-center gap-6 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-gray-800"> 
  <div className="min-w-0 py-5 pr-5 pl-28">
    <div className="truncate text-sm font-medium text-gray-900 sm:text-base dark:text-gray-200">Andrew Alfred</div>
    <div className="truncate text-sm leading-tight text-gray-500 sm:text-base dark:text-gray-400">
      Assistant to the Traveling Secretary
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:max-w-md] -->
<div class="max-w-md ...">
  <!-- ... -->
</div>
</Figure>

Using breakpoints container

Use the container utility to set the maximum width of an element to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport:

html
<!-- [!code classes:container] -->
<div class="container">
  <!-- ... -->
</div>

Note that unlike containers you might have used in other frameworks, Tailwind's container does not center itself automatically and does not have any built-in horizontal padding. Use mx-auto and the px-<number> utilities to add these:

html
<!-- [!code classes:mx-auto,px-4] -->
<div class="container mx-auto px-4">
  <!-- ... -->
</div>

Using a custom value

<UsingACustomValue utility="max-w" value="220px" name="maximum width" variable="max-width" />

Responsive design

<ResponsiveDesign property="max-width" defaultClass="max-w-sm" featuredClass="max-w-lg" />

Customizing your theme

<CustomizingYourSpacingScale utility="max-w" />