Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Max-Width

Quiz

Tailwind CSS max-width is a utility class that provides an effective way of handling the content max-width. This is used to set the max-width or manipulate the max-width of any HTML elements.

Tailwind CSS Max-Width Classes

The following is the list of Tailwind CSS max-width classes that provide an effective way of handling content max-width.

Class	CSS Properties
max-w-0	max-width: 0px;
max-w-px	max-width: 1px;
max-w-0.5	max-width: 0.125rem; /* 2px */
max-w-1	max-width: 0.25rem; /* 4px */
max-w-1.5	max-width: 0.375rem; /* 6px */
max-w-2	max-width: 0.5rem; /* 8px */
max-w-2.5	max-width: 0.625rem; /* 10px */
max-w-3	max-width: 0.75rem; /* 12px */
max-w-3.5	max-width: 0.875rem; /* 14px */
max-w-4	max-width: 1rem; /* 16px */
max-w-5	max-width: 1.25rem; /* 20px */
max-w-6	max-width: 1.5rem; /* 24px */
max-w-7	max-width: 1.75rem; /* 28px */
max-w-8	max-width: 2rem; /* 32px */
max-w-9	max-width: 2.25rem; /* 36px */
max-w-10	max-width: 2.5rem; /* 40px */
max-w-11	max-width: 2.75rem; /* 44px */
max-w-12	max-width: 3rem; /* 48px */
max-w-14	max-width: 3.5rem; /* 56px */
max-w-16	max-width: 4rem; /* 64px */
max-w-20	max-width: 5rem; /* 80px */
max-w-24	max-width: 6rem; /* 96px */
max-w-28	max-width: 7rem; /* 112px */
max-w-32	max-width: 8rem; /* 128px */
max-w-36	max-width: 9rem; /* 144px */
max-w-40	max-width: 10rem; /* 160px */
max-w-44	max-width: 11rem; /* 176px */
max-w-48	max-width: 12rem; /* 192px */
max-w-52	max-width: 13rem; /* 208px */
max-w-56	max-width: 14rem; /* 224px */
max-w-60	max-width: 15rem; /* 240px */
max-w-64	max-width: 16rem; /* 256px */
max-w-72	max-width: 18rem; /* 288px */
max-w-80	max-width: 20rem; /* 320px */
max-w-96	max-width: 24rem; /* 384px */
max-w-none	max-width: none;
max-w-xs	max-width: 20rem; /* 320px */
max-w-sm	max-width: 24rem; /* 384px */
max-w-md	max-width: 28rem; /* 448px */
max-w-lg	max-width: 32rem; /* 512px */
max-w-xl	max-width: 36rem; /* 576px */
max-w-2xl	max-width: 42rem; /* 672px */
max-w-3xl	max-width: 48rem; /* 768px */
max-w-4xl	max-width: 56rem; /* 896px */
max-w-5xl	max-width: 64rem; /* 1024px */
max-w-6xl	max-width: 72rem; /* 1152px */
max-w-7xl	max-width: 80rem; /* 1280px */
max-w-full	max-width: 100%;
max-w-min	max-width: min-content;
max-w-max	max-width: max-content;
max-w-fit	max-width: fit-content;
max-w-prose	max-width: 65ch;
max-w-screen-sm	max-width: 640px;
max-w-screen-md	max-width: 768px;
max-w-screen-lg	max-width: 1024px;
max-w-screen-xl	max-width: 1280px;
max-w-screen-2xl	max-width: 1536px;

Functionality of Tailwind CSS Max-Width Classes

max-w-0: This class is used to specify the element's width as max-width: 0rem.
max-w-none: This class is used to specify the element's width as max-width: none.
max-w-xs: This class is used to specify the element's width as max-width: 20rem.
max-w-sm: This class is used to specify the element's width as max-width: 24rem.
max-w-md: This class is used to specify the element's width as max-width: 28rem.
max-w-lg: This class is used to specify the element's width as max-width: 32rem.
max-w-xl: This class is used to specify the element's width as max-width: 36rem.
max-w-2xl: This class is used to specify the element's width as max-width: 42rem;
max-w-3xl: This class is used to specify the element's width as max-width: 48rem.
max-w-4xl: This class is used to specify the element's width as max-width: 56rem.
max-w-5xl: This class is used to specify the element's width as max-width: 64rem.
max-w-6xl: This class is used to specify the element's width as max-width: 72rem.
max-w-7xl: This class is used to specify the element's width as max-width: 80rem.
max-w-full: This class is used to specify the element's width as max-width: 100%.
max-w-min: This class is used to specify the element's width as max-width: min-content.
max-w-max: This class is used to specify the element's width as max-width: max-content.
max-w-prose: This class is used to specify the element's width as max-width: 65ch.
max-w-screen-sm: This class is used to specify the element's width as max-width: 640px.
max-w-screen-md: This class is used to specify the element's width as max-width: 768px.
max-w-screen-lg: This class is used to specify the element's width as max-width: 1024px.
max-w-screen-xl: This class is used to specify the element's width as max-width: 1280px.
max-w-screen-2xl: This class is used to specify the element's width as max-width: 1536px.

Tailwind CSS Max-Width Class Examples

The following examples will illustrate the Tailwind CSS max-width class utility.

Setting Maximum wWidth

We have used the CSS maximum-width property so many times, as here we can achieve that by using the mentioned classes as well.

Example

Here in this example, we will create three elements and set different maximum widths by using the above mentioned classes.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-3">
        Tailwind CSS max-width Class
    </h2>
    <div class="max-w-48 inline-block 
                bg-green-400 h-12 rounded-lg p-2.5 m-2">
        This box has max-w-48
    </div>
    <br>
    <div class="max-w-56 inline-block 
                bg-green-400 h-auto rounded-lg p-2.5 m-2">
        This box has a max-w-56 class.
    </div>
    <br>
    <div class=" max-w-64 inline-block bg-green-400 
                h-auto rounded-lg p-2.5 m-2 justify-text">
        This box has a min-w-64. But the content is
        larger than the min-width. Hence the value of min-width
        has no effect. This is a dimensional property which can
        be styled using tailwind CSS.
    </div>
</body>

</html>

Conditional Maximum Width

We can change the maximum width value based on conditions like hover, focus, or screen size. To set a condition on any element's maximum width, we can use `hover` and `focus` classes.

Example

In the following example, we will change the maximum width value on hovering over the element.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-3">
        Tailwind CSS max-width Class
    </h2>
    <div class="max-w-96 inline-block hover:max-w-24
                bg-green-400 h-auto rounded-lg p-2.5 m-2">
        Hover over me
    </div>
</body>

</html>

Print Page