Elements logo

Min-width

Utilities for setting the minimum width of an element

Class reference

ClassProperties
min-w-0min-width: 0;
min-w-pxmin-width: 1px;
min-w-0.5min-width: 0.125rem;
min-w-1min-width: 0.25rem;
min-w-1.5min-width: 0.375rem;
min-w-2min-width: 0.5rem;
min-w-2.5min-width: 0.625rem;
min-w-3min-width: 0.75rem;
min-w-3.5min-width: 0.875rem;
min-w-4min-width: 1rem;
min-w-4.5min-width: 1.125rem;
min-w-5min-width: 1.25rem;
min-w-6min-width: 1.5rem;
min-w-7min-width: 1.75rem;
min-w-8min-width: 2rem;
min-w-9min-width: 2.25rem;
min-w-10min-width: 2.5rem;
min-w-11min-width: 2.75rem;
min-w-12min-width: 3rem;
min-w-13min-width: 3.25rem;
min-w-14min-width: 3.5rem;
min-w-15min-width: 3.75rem;
min-w-16min-width: 4rem;
min-w-18min-width: 4.5rem;
min-w-20min-width: 5rem;
min-w-24min-width: 6rem;
min-w-28min-width: 7rem;
min-w-32min-width: 8rem;
min-w-36min-width: 9rem;
min-w-40min-width: 10rem;
min-w-48min-width: 12rem;
min-w-56min-width: 14rem;
min-w-60min-width: 15rem;
min-w-64min-width: 16rem;
min-w-72min-width: 18rem;
min-w-80min-width: 20rem;
min-w-96min-width: 24rem;
min-w-fullmin-width: 100%;
min-w-minmin-width: min-content;
min-w-maxmin-width: max-content;
min-w-1/4min-width: 25%;
min-w-1/2min-width: 50%;
min-w-3/4min-width: 75%;
min-w-screen-25min-width: 25vw;
min-w-screen-50min-width: 50vw;
min-w-screen-75min-width: 75vw;

Usage

Set the minimum width of an element using the min-w-0 or min-w-full utilities.

min-w-full
<div class="w-24 min-w-full ...">
  min-w-full
</div>

Responsive

To control the min-width of an element at a specific breakpoint, add a {screen}: prefix to any existing min-width utility.

<div class="w-24 min-w-full **md:min-w-0** ...">
  <!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.