Tailwind CSS Max-Width - GeeksforGeeks

Tailwind CSS Max-Width

Last Updated : 3 Nov, 2026

The Max-Width utilities in Tailwind CSS are used to set the maximum width of an element. They are the Tailwind CSS alternatives to the CSS max-width property. It defines the maximum width an element can have. If the content or specified width is larger than the maximum width, the element does not grow beyond the specified maximum width.

Max-Width Classes

ClassCSS
max-w-0max-width: 0rem;
max-w-xsmax-width: 20rem;
max-w-smmax-width: 24rem;
max-w-mdmax-width: 28rem;
max-w-lgmax-width: 32rem;
max-w-xlmax-width: 36rem;
max-w-2xlmax-width: 42rem;
max-w-3xlmax-width: 48rem;
max-w-4xlmax-width: 56rem;
max-w-5xlmax-width: 64rem;
max-w-6xlmax-width: 72rem;
max-w-7xlmax-width: 80rem;
max-w-nonemax-width: none;
max-w-pxmax-width: 1px;
max-w-fullmax-width: 100%;
max-w-minmax-width: min-content;
max-w-maxmax-width: max-content;
max-w-fitmax-width: fit-content;
max-w-prosemax-width: 65ch;
max-w-screen-smmax-width: 640px;
max-w-screen-mdmax-width: 768px;
max-w-screen-lgmax-width: 1024px;
max-w-screen-xlmax-width: 1280px;
max-w-screen-2xlmax-width: 1536px;
max-w-<number>max-width: calc(var(--spacing) * <number>);
max-w-(<custom-property>)max-width: var(<custom-property>);
max-w-[<value>]max-width: <value>;

1. max-w-<number>

The max-w-<number> utility sets the maximum width using Tailwind's spacing scale.

Syntax:

<element class="max-w-<number>">...</element>

Example:

<div class="max-w-96 bg-green-400 p-4">
    This element has a maximum width of 24rem.
</div>

Here, max-w-96 sets the maximum width using the spacing scale.

2. max-w-px

The max-w-px utility sets the maximum width to 1px.

Example:

<div class="max-w-px bg-green-400 h-10">
    max-w-px
</div>

3. max-w-none

The max-w-none utility removes the maximum width constraint.

Example:

<div class="max-w-none bg-green-400 p-4">
    max-w-none
</div>

It applies:

max-width: none;

4. max-w-full

The max-w-full utility sets the maximum width of an element to 100%.

Example:

<div class="max-w-full bg-green-400 p-4">
    max-w-full
</div>

It allows the element to grow up to the full width of its containing block.

5. max-w-min

The max-w-min utility sets the maximum width to the element's minimum content width.

Example:

<div class="max-w-min bg-green-400 p-4">
    max-w-min
</div>

It applies:

max-width: min-content;

6. max-w-max

The max-w-max utility sets the maximum width to the element's maximum content width.

Example:

<div class="max-w-max bg-green-400 p-4">
    max-w-max
</div>

It applies:

max-width: max-content;

7. max-w-fit

The max-w-fit utility sets the maximum width to the element's fit-content width.

Example:

<div class="max-w-fit bg-green-400 p-4">
    max-w-fit
</div>

It applies:

max-width: fit-content;

8. max-w-prose

The max-w-prose utility sets the maximum width to 65ch, which is useful for keeping text at a readable line length.

Example:

<article class="max-w-prose">
    <h2 class="text-2xl font-bold">Tailwind CSS</h2>
    <p>
        Tailwind CSS provides utility classes that can be used
        to style HTML elements directly in your markup.
    </p>
</article>

It applies:

max-width: 65ch;

The max-w-prose utility controls the width of the element. It does not require the Tailwind CSS Typography plugin.

9. max-w-screen-*

Tailwind CSS also provides utilities for setting the maximum width according to common screen-size breakpoints.

<div class="max-w-screen-sm">max-w-screen-sm</div>
<div class="max-w-screen-md">max-w-screen-md</div>
<div class="max-w-screen-lg">max-w-screen-lg</div>
<div class="max-w-screen-xl">max-w-screen-xl</div>
<div class="max-w-screen-2xl">max-w-screen-2xl</div>

These utilities correspond to:

  • max-w-screen-sm → 640px
  • max-w-screen-md → 768px
  • max-w-screen-lg → 1024px
  • max-w-screen-xl → 1280px
  • max-w-screen-2xl → 1536px

10. max-w-(<custom-property>)

The max-w-(<custom-property>) utility can be used when the maximum width is stored in a CSS custom property.

Example:

<div
    style="--content-width: 500px;"
    class="max-w-(--content-width) bg-green-400 p-4">
    Custom maximum width
</div>

This generates:

max-width: var(--content-width);

11. max-w-[<value>]

The max-w-[<value>] utility allows you to specify a custom maximum width directly.

Example:

<div class="max-w-[500px] bg-green-400 p-4">
    Custom maximum width
</div>

This generates:

max-width: 500px;

Example:

The following example demonstrates different Max-Width utilities in Tailwind CSS.

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<!--Driver Code Ends-->

<body class="mx-4 space-y-4 text-center">

    <h1 class="text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>

    <b>Tailwind CSS Max-Width Classes</b>

    <div class="mx-auto h-8 max-w-xs rounded-lg bg-green-400 text-white">
        max-w-xs
    </div>

    <div class="mx-auto h-8 max-w-md rounded-lg bg-green-400 text-white">
        max-w-md
    </div>

    <div class="mx-auto h-8 max-w-lg rounded-lg bg-green-400 text-white">
        max-w-lg
    </div>

    <div class="mx-auto h-8 max-w-xl rounded-lg bg-green-400 text-white">
        max-w-xl
    </div>

    <div class="mx-auto h-8 max-w-2xl rounded-lg bg-green-400 text-white">
        max-w-2xl
    </div>

    <div class="mx-auto h-8 max-w-fit rounded-lg bg-green-400 px-4 text-white">
        max-w-fit
    </div>

    <div class="mx-auto h-8 max-w-[500px] rounded-lg bg-green-400 text-white">
        max-w-[500px]
    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

Output: The output displays several elements with different maximum-width constraints. Each element can grow only up to the maximum width defined by its respective Tailwind CSS utility.

Comment

Explore