# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/max-width.mdx

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">
      <img
        className="absolute -left-6 h-28 w-28 rounded-full"
        src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
      />
      <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" />