Layout

This section documents Tailwind CSS v4.x — the CSS-first configuration line, whose v4.0 release shipped in January 2025 — as published at the official Tailwind CSS documentation, which is the reference these pages are written and verified against. No specific patch version is pinned.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Tailwind iterates quickly.

This section’s bibliography lists the reference material consulted while preparing these pages.

Tailwind exposes the CSS layout primitives — the display mode, the positioning scheme, overflow behaviour, fragmentation, and table rendering — as single-purpose utility classes. This page covers the ones that decide where a box sits and how it is sized; flex and grid tracks have their own page (Flexbox and Grid).

Display and the box

display is set with display utilities: block, inline-block, inline, flex, inline-flex, grid, inline-grid, table (and the table-row / table-cell family), contents, flow-root, and hidden (which is display: none). Combine with variants to toggle layout per breakpoint or state.

<!-- hidden on mobile, flex from md up -->
<nav class="hidden md:flex gap-4">...</nav>

<!-- contents removes the wrapper box but keeps its children in the parent's grid -->
<div class="contents">
  <span>a</span><span>b</span>
</div>

box-sizing is box-border (the Preflight default, border-box) or box-content. isolation — isolate / isolation-auto — creates a new stacking context so z-index and mix-blend-* on descendants stay contained.

<div class="isolate">
  <div class="relative z-10 mix-blend-multiply">...</div>
</div>

Float and clear

float gives float-start, float-end, float-left, float-right, and float-none; clear gives clear-start, clear-end, clear-left, clear-right, clear-both, and clear-none. Use flow-root on the container (or a grid/flex layout) instead of a clearfix hack.

<article class="flow-root">
  <img class="float-start me-4 mb-2 w-32 rounded" src="/thumb.jpg" alt="">
  <p>Text wraps around the floated thumbnail; flow-root contains the float.</p>
</article>

Replaced-element fit

object-fit (object-contain, object-cover, object-fill, object-none, object-scale-down) and object-position (object-center, object-top, object-bottom-right, …, or an arbitrary object-[25%_75%]) control how an <img> or <video> fills its box.

<img class="h-48 w-full object-cover object-top" src="/hero.jpg" alt="">

Overflow and overscroll

overflow utilities come in three axes: overflow-auto, overflow-hidden, overflow-clip, overflow-visible, overflow-scroll, plus the overflow-x- and overflow-y- variants. overscroll-behavior — overscroll-auto, overscroll-contain, overscroll-none (and -x / -y) — stops scroll chaining from a nested pane to the page.

<div class="h-64 overflow-y-auto overscroll-contain rounded border p-4">
  <!-- long content; wheel/touch scroll stays inside this pane -->
</div>

Position and inset

position utilities are static, relative, absolute, fixed, and sticky. Offsets use top / right / bottom / left: the logical inset-, inset-x-, inset-y-, start-, end- and the physical top-, right-, bottom-, left-*. Values follow the spacing scale, accept fractions (inset-1/2), full, auto, an arbitrary top-[3px], and negative values with a leading dash (-top-4, -inset-x-2).

<div class="relative">
  <span class="absolute -top-2 -right-2 z-10 rounded-full bg-red-500 px-2 text-xs text-white">9</span>
  <img src="/avatar.jpg" alt="" class="size-16 rounded-full">
</div>

<header class="sticky top-0 inset-x-0 z-40 bg-white/80 backdrop-blur">...</header>

visibility (visible, invisible, collapse) hides a box while keeping its space; z-index is z-0 … z-50, z-auto, a negative -z-10, or an arbitrary z-[999].

Aspect ratio, columns, and fragmentation

aspect-ratio: aspect-video (16/9), aspect-square (1/1), aspect-auto, the theme-driven aspect-<name>, or an arbitrary aspect-[4/3].

<iframe class="aspect-video w-full rounded" src="https://www.youtube.com/embed/..."></iframe>
<div class="aspect-square bg-slate-200"></div>
<div class="aspect-[4/3] bg-slate-200"></div>

columns sets a CSS multi-column count or width: columns-2, columns-3xs … columns-7xl, columns-auto, or columns-[16rem]. Control breaks with break-before, break-after, and break-inside (break-inside-avoid, break-inside-avoid-column, …), and keep a decorated inline box intact across a fragmentation break with box-decoration-break (box-decoration-slice / box-decoration-clone).

<div class="columns-2 gap-8 md:columns-3">
  <p class="break-inside-avoid">Each paragraph stays in one column...</p>
  <p class="break-inside-avoid">...instead of splitting across the gap.</p>
</div>

The `container` utility in v4

In Tailwind v4 container is only a max-width that steps up with each breakpoint (width: 100% below sm, then max-width locked to each breakpoint’s min-width). The v3 theme.container config — with its center and padding keys — no longer exists. To centre the container or give it gutters, redefine it as a custom utility with @utility container \{ … \}:

@import "tailwindcss";

@utility container {
  margin-inline: auto;
  padding-inline: 1rem;

  @media (width >= theme(--breakpoint-sm)) {
    padding-inline: 2rem;
  }
}

Now <div class="container"> is centred with responsive padding, and the breakpoint max-width steps still apply. Often a plain mx-auto max-w-6xl px-4 wrapper is simpler than touching container at all.

Tables

border-collapse toggles border-collapse / border-separate. With border-separate, border-spacing sets the gap: border-spacing-2, border-spacing-x-4, border-spacing-y-0, or an arbitrary border-spacing-[3px]. table-layout is table-auto (size to content) or table-fixed (honour the first row’s / colgroup’s widths). caption-side places the <caption> with caption-top or caption-bottom.

<table class="table-fixed border-collapse border border-slate-300 w-full">
  <caption class="caption-bottom py-2 text-sm text-slate-500">Table 1. Quarterly totals</caption>
  <thead>
    <tr>
      <th class="border border-slate-300 p-2 w-1/2">Region</th>
      <th class="border border-slate-300 p-2">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td class="border border-slate-300 p-2">North</td><td class="border border-slate-300 p-2">1,204</td></tr>
  </tbody>
</table>

<!-- separated borders with a controlled gap -->
<table class="border-separate border-spacing-2">
  <tr><td class="rounded bg-slate-100 p-2">A</td><td class="rounded bg-slate-100 p-2">B</td></tr>
</table>

For the underlying CSS behind these utilities — the box model, positioning schemes, stacking contexts, and table rendering — see Layout: Float, Flexbox & Grid.