Sizing, width and height

Controlling dimensions

Utilities such as w-*, h-*, size-*, min-w-*, max-w-*, min-h-* and max-h-* control element dimensions.

Prefer constraints for responsive layouts

A page section often works better with a maximum width than with a fixed width. For example, max-w-3xl keeps text readable while allowing the container to shrink on small screens.

Viewport and arbitrary values

Use values such as w-full or viewport-related arbitrary values when appropriate. Avoid hard-coded heights that can clip content when text or localization changes.