Skip to main content
Sizing overview cover

​
Overview

Sizing utilities cover width, height, and matching min/max constraints with the same suffix families.

Width

Full, auto, w-px, fractions, and w-3xs … w-7xl

Height

Full-height, auto-height, and viewport-height helpers

Max Width

Parallel max-w-* for every w-* suffix

Min Width

Parallel min-w-* for every w-* suffix

Max Height

Parallel max-h-* for every h-* suffix

Min Height

Parallel min-h-* for every h-* suffix

​
Quick Start

​
Basic Sizing

Width utilities
<div class="elementor-element w-full p-4">Full width</div>
<div class="elementor-element w-1-2 p-4">Half width</div>
<div class="elementor-element w-1-3 p-4">One third width</div>
Height utilities
<div class="elementor-element h-screen flex items-center justify-center">
  <div class="text-center">Full viewport height</div>
</div>
Max width utilities
<div class="elementor-element max-w-2xl mx-auto p-6">
  <h1 class="text-3xl font-bold">Centered content</h1>
</div>

​
What Ships

  • Width: .w-auto, .w-full, .w-px, .w-1-2 … .w-3-4, .w-3xs … .w-7xl
  • Min width: .min-w-* mirrors every width suffix
  • Max width: .max-w-* mirrors every width suffix
  • Height: .h-auto, .h-full, .h-screen, .h-px, .h-1-2 … .h-3-4, .h-3xs … .h-7xl
  • Min height: .min-h-* mirrors every height suffix
  • Max height: .max-h-* mirrors every height suffix

Layout

Display utilities for sizing

Spacing

Margin and padding utilities