Dimensions

The Dimensions utilities provide width, max-width, and height controls for elements. These utilities offer a flexible approach to sizing elements with responsive max-width constraints based on breakpoint tokens, as well as common width and height values for layout purposes.

Usage

The dimensions utilities include max-width classes that automatically set width to 100% while constraining the maximum width, plus standard width and height utilities for common sizing needs.

<div class="maxw-3">Content constrained to a maximum width</div>

<div class="w-full h-full">Full width and height element</div>

The max-width utilities are particularly useful for creating responsive containers that scale with their parent but don't exceed readable widths on larger screens.

Class Patterns