Tailwind CSS Sizing

Controlling element dimensions (width and height) is fundamental to layout. Tailwind provides a rich and consistent set of utility classes for managing element sizes, supporting fixed values, percentages, and viewport-based units.

Width

Use w-{size} utility classes to set an element's width.

Scale-based Width

Tailwind's default theme includes a numeric scale from 0 to 96, plus some special values. This scale is shared with the spacing system.

• w-0: width: 0px;
• w-px: width: 1px;
• w-4: width: 1rem; (16px)
• w-64: width: 16rem; (256px)

Percentage Width

Tailwind also provides percentage-based width utilities for creating fluid layouts.

• w-1/2: width: 50%;
• w-1/3: width: 33.333333%;
• w-2/5: width: 40%;
• w-full: width: 100%;

Viewport-based Width

• w-screen: width: 100vw; (element width equals viewport width)

Special Width

• w-auto: width: auto; (browser automatically calculates width)
• w-min: width: min-content; (width shrinks to minimum content width)
• w-max: width: max-content; (width expands to maximum content width)
• w-fit: width: fit-content;

<div class="w-96 ...">I'm 96 units wide.</div>
<div class="w-1/2 ...">I'm half of my parent's width.</div>

Height

Use h-{size} utility classes to set an element's height. Height utilities are very similar to width utilities.

Scale-based Height

• h-4: height: 1rem;
• h-64: height: 16rem;

Percentage Height

• h-full: height: 100%; (Note: parent element needs to have an explicit height defined)

Viewport-based Height

• h-screen: height: 100vh; (element height equals viewport height)

Special Height

• h-auto: height: auto;

<div class="h-screen bg-gray-100">
  <!-- This div will take up the full screen height -->
</div>

Min/Max Sizing

Sometimes you don't want to set a fixed size, but rather limit an element's minimum or maximum size.

Min-Width

Use min-w-{size} to set an element's minimum width.

• min-w-0: min-width: 0px;
• min-w-full: min-width: 100%;
• min-w-min: min-width: min-content;

Max-Width

Use max-w-{size} to set an element's maximum width. This is very useful for creating responsive containers with content width constraints.

• max-w-xs: max-width: 20rem;
• max-w-7xl: max-width: 80rem;
• max-w-full: max-width: 100%;
• max-w-screen-lg: max-width: 1024px; (based on breakpoint)

<div class="max-w-4xl mx-auto p-8">
  <!-- This container has a maximum width of 4xl and is horizontally centered -->
  ... content ...
</div>

Min/Max-Height

Similarly, min-h-{size} and max-h-{size} are used to control minimum and maximum height.

• min-h-screen: Ensures the element is at least as tall as the screen, commonly used for creating "sticky footer" layouts.
• max-h-96: Limits the element's maximum height to 96 units, often used with overflow-y-auto to create scrollable areas.

By combining these sizing utility classes, you can precisely control the size and responsive behavior of every element on your page.