Tailwind Width and Height Classes to CSS

Tailwind Sizing Utilities in CSS

Tailwind provides a rich set of width and height utilities that cover fixed sizes from the spacing scale, fractional widths, viewport units, and keyword values like auto, min-content, and fit-content.

Width Classes

/* w-full */
width: 100%;

/* w-screen */
width: 100vw;

/* w-auto */
width: auto;

/* w-64 (from spacing scale) */
width: 16rem;

/* w-1/2 (fractional) */
width: 50%;

/* w-1/3 */
width: 33.333333%;

/* w-fit */
width: fit-content;

/* w-min */
width: min-content;

/* w-max */
width: max-content;

Height Classes

/* h-screen */
height: 100vh;

/* h-full */
height: 100%;

/* h-auto */
height: auto;

/* h-64 */
height: 16rem;

Max-Width

Max-width classes use a named scale rather than numbers:

/* max-w-sm */  max-width: 24rem;
/* max-w-md */  max-width: 28rem;
/* max-w-lg */  max-width: 32rem;
/* max-w-xl */  max-width: 36rem;
/* max-w-2xl */ max-width: 42rem;
/* max-w-prose */ max-width: 65ch;
/* max-w-screen-lg */ max-width: 1024px;

Min-Width and Min-Height

/* min-w-0 */
min-width: 0px;

/* min-h-screen */
min-height: 100vh;

/* min-h-full */
min-height: 100%;

These utilities are building blocks for responsive layouts where containers need constrained sizing without media queries.