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="flex flex-wrap align-items-center justify-content-center">
    <div class="border-round bg-primary-100 w-12rem p-3 m-3">
        <div class="min-w-full border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">min-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:min-w-full to use a responsive class.

Class	Description
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="flex flex-wrap align-items-center justify-content-center">
    <div class="border-round bg-primary-100 w-20rem p-3 m-3">
        <div class="min-w-min md:min-w-max border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">responsive min-width</div>
    </div>
</div>