Max Width

Defines the maximum width of an element.

Classes
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;
Examples
max-w-full

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="bg-blue-50 shadow-1 p-3 m-3" style="width: 200px;">
        <div class="max-w-full bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">max-w-full</div>
    </div>
</div>

Responsive

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 flex flex-wrap align-items-center justify-content-center">
    <div class="bg-blue-50 shadow-1 p-3 m-3" style="width: 250px;">
        <div class="max-w-min md:max-w-max  bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">max-w-min on small screen</div>
    </div>
</div>