Skip to content
</>CodeAndBuild

CSS

Layout primitives for Tailwind interfaces

A small set of width, gap, and padding rules will hold a Tailwind layout together longer than another one-off margin.

5 min read
  • Tailwind CSS
  • Layout
On this page
  1. One reading width, one page width
  2. Stack with gap, not a margin on every child

Tailwind makes every spacing value equally easy to type. That is how a page ends up with mt-3, mt-7, and a custom pixel value for the same kind of gap. Pick a few primitives and repeat them.

One reading width, one page width

Long text wants a narrow column, about max-w-3xl. A card grid wants the page width, about max-w-6xl. Center both with mx-auto, and use the same horizontal padding on every page so the header lines up with the content.

app/page.tsxtsx
<main className="mx-auto w-full max-w-6xl px-4 py-16 sm:px-6">
  <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
    {articles.map((article) => (
      <article key={article.slug} className="rounded-2xl border p-6">
        {article.title}
      </article>
    ))}
  </div>
</main>

Stack with gap, not a margin on every child

flex flex-col gap-4 and grid gap-5 put space between items without a special case for the first child. Reach for mt-* when one section needs to separate from the section above it, not between every paragraph the parent already controls.

  • Page shell: max-w-6xl with px-4 and sm:px-6.
  • Article column: max-w-3xl inside that shell.
  • Cards: p-6, rounded-2xl, and a 1px border.
  • Inline stacks: gap-2 for meta, gap-4 or gap-6 for sections.

More guides