Layout

The container utility creates a responsive, centered wrapper with max-width constraints that align with Tailwind's breakpoints. It's the foundation for most layouts, ensuring content doesn't stretch too wide on large screens while maximizing available space on smaller devices. Note that in Tailwind v4, the container doesn't add padding by default—combine with px-{size} utilities for padding.

Controls how element decorations (like background, border, shadow, etc.) behave when the element breaks across multiple lines or columns. This is particularly useful for styling inline elements that may wrap, such as highlighted text or links. In Tailwind v4, this utility helps ensure consistent styling across fragmented content.

Determines how the total width and height of an element is calculated. This fundamental layout utility controls whether padding and border are included in the element's dimensions or added to them. Understanding box-sizing is crucial for creating predictable layouts, especially when working with percentage-based widths.

Controls how an element is rendered in the document flow. The display property is one of the most important CSS properties for controlling layout and behavior. It determines if an element generates a block or inline box, or a different type of formatting context like flex, grid, or none (hidden). In Tailwind v4, all display utilities benefit from improved compatibility with OKLCH colors and other modern CSS features.

Sets the preferred aspect ratio for an element, which will be maintained as the element resizes. This is extremely useful for responsive design, particularly with images, videos, and other media to prevent layout shifts during page load. In Tailwind v4, the aspect-ratio utility has enhanced browser support and performance.

Creates multi-column text layouts, similar to newspaper or magazine columns. This allows long blocks of text to flow naturally across multiple columns, improving readability on larger screens. In Tailwind v4, columns utilities have better support across browsers and work well with other modern CSS features.

Controls how page, column, or region breaks should behave after an element. This is especially useful for print layouts and multi-column content where you need to control where breaks occur. In Tailwind v4, break utilities have improved support across browsers and printing contexts.

Controls how page, column, or region breaks should behave before an element. Similar to break-after but affects the space before the element. This provides precise control for print layouts and multi-column content, ensuring content flows naturally across pages and columns.

Controls how page, column, or region breaks should behave inside an element. This prevents elements from being split across pages, columns, or regions, which is essential for maintaining the integrity of content blocks like figures, tables, or cards in multi-column layouts and print contexts.

Controls how replaced elements like images and videos should be resized and positioned within their containers. This is crucial for responsive design, allowing media to adapt beautifully to different container dimensions without distortion. In Tailwind v4, object-fit utilities work seamlessly with aspect-ratio and other modern layout features.

Controls the positioning of replaced elements like images and videos within their containing box when using object-fit. This allows you to focus on specific parts of media that should remain visible when cropped. In Tailwind v4, object-position works fluidly with other modern layout utilities and supports logical properties for better RTL handling.

Controls what happens to content that extends beyond its container's boundaries. This is essential for managing how scrolling behaves, whether content should be clipped, or if scrollbars should appear. In Tailwind v4, overflow utilities have improved handling with modern scrolling behaviors and are fully compatible with other layout utilities.

Controls what happens when a user scrolls beyond the boundaries of a scrolling area. This prevents scroll chaining, where reaching the end of a scrollable element causes the parent container or page to scroll. In Tailwind v4, overscroll utilities provide improved handling of nested scrollable areas for a more polished user experience.

Determines how an element is positioned in the document flow. This fundamental layout utility influences how elements are stacked, how they interact with other elements, and how they respond to scrolling. In Tailwind v4, position utilities are enhanced with better interoperability with other layout utilities like Grid and Flexbox.

Controls the placement of positioned elements (absolute, fixed, or sticky) by setting the distance from each edge of their containing box. These utilities are used with positioned elements to precisely control their location. In Tailwind v4, these utilities support logical properties for better RTL language support and have improved integration with layout containment.

Controls whether an element is visually perceivable without affecting its layout. Unlike display:none (which removes the element from the flow), visibility: hidden makes an element invisible while still occupying space. In Tailwind v4, visibility utilities have improved interaction with animation and transition utilities for more sophisticated UI effects.

Controls the stacking order of positioned elements (those with a position value other than static). Higher z-index values appear on top of elements with lower values. This is vital for creating layered interfaces like modals, tooltips, and sticky headers. In Tailwind v4, z-index utilities have better integration with stacking contexts created by modern CSS properties.