⌘ K

    Max Width

    Defines the maximum width of an element.

    Class Properties
    max-w-0 max-width: 0px;
    max-w-full max-width: 100%;
    max-w-screen max-width: 100vw;
    max-w-min max-width: min-content;
    max-w-max max-width: max-content;
    max-w-1rem max-width: 1rem;
    max-w-2rem max-width: 2rem;
    max-w-3rem max-width: 3rem;
    max-w-4rem max-width: 4rem;
    max-w-5rem max-width: 5rem;
    max-w-6rem max-width: 6rem;
    max-w-7rem max-width: 7rem;
    max-w-8rem max-width: 8rem;
    max-w-9rem max-width: 9rem;
    max-w-10rem max-width: 10rem;
    max-w-11rem max-width: 11rem;
    max-w-12rem max-width: 12rem;
    max-w-13rem max-width: 13rem;
    max-w-14rem max-width: 14rem;
    max-w-15rem max-width: 15rem;
    max-w-16rem max-width: 16rem;
    max-w-17rem max-width: 17rem;
    max-w-18rem max-width: 18rem;
    max-w-19rem max-width: 19rem;
    max-w-20rem max-width: 20rem;
    max-w-21rem max-width: 21rem;
    max-w-22rem max-width: 22rem;
    max-w-23rem max-width: 23rem;
    max-w-24rem max-width: 24rem;
    max-w-25rem max-width: 25rem;
    max-w-26rem max-width: 26rem;
    max-w-27rem max-width: 27rem;
    max-w-28rem max-width: 28rem;
    max-w-29rem max-width: 29rem;
    max-w-30rem max-width: 30rem;
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container blue-container">
            <div class="border-round bg-blue-100 w-12rem p-3 m-3">
                <div class="max-w-full border-round bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">max-w-full</div>

    Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:max-w-full to use a responsive class.

    • sm: small screens e.g. phones
    • md: medium screens e.g. tablets
    • lg: large screens e.g. notebooks
    • xl: larger screens e.g monitors
    Minimum Content on a Small Screen

    Resize to change width value.

    max-w-min on small screen
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container yellow-container">
            <div class="border-round bg-yellow-100 w-20rem p-3 m-3">
                <div class="max-w-min md:max-w-max border-round bg-yellow-500 text-gray-900 font-bold p-3 flex align-items-center justify-content-center">max-w-min on small screen</div>