⌘ K
esc

    Min Width

    Defines the minimum width of an element.

    Classes
    Class Properties
    min-w-0 min-width: 0px;
    min-w-full min-width: 100%;
    min-w-screen min-width: 100vw;
    min-w-min min-width: min-content;
    min-w-max min-width: max-content;
    Examples
    min-w-full
    
    <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="min-w-full border-round bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">min-w-full</div>
            </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:min-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
    responsive min-width
    
    <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="min-w-min md:min-w-max border-round bg-yellow-500 text-gray-900 font-bold p-3 flex align-items-center justify-content-center">responsive min-width</div>
            </div>
        </div>
    </div>