Building a Page with Utilities

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.

This page assembles utilities from the rest of the section into one small responsive layout, showing the usual order of work: structure first, then breakpoints, then states, then theme — the workflow described in Styling with utility classes. Paste any step into Tailwind Play to see it live.

1. Structure with layout utilities

<header class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
  <a href="/" class="text-lg font-bold">Acme</a>
  <nav class="flex gap-6 text-sm font-medium">
    <a href="/features">Features</a>
    <a href="/pricing">Pricing</a>
    <a href="/docs">Docs</a>
  </nav>
</header>

<section class="mx-auto max-w-3xl px-6 py-16 text-center">
  <h1 class="text-4xl font-extrabold tracking-tight">Ship your site faster</h1>
  <p class="mt-4 text-gray-600">Utility-first CSS, no context switching.</p>
  <a href="/start" class="mt-8 inline-block rounded-md bg-sky-600 px-5 py-2.5 font-semibold text-white">
    Get started
  </a>
</section>

<div class="mx-auto grid max-w-5xl gap-6 px-6 pb-16">
  <article class="rounded-xl border border-gray-200 p-6">
    <h3 class="font-semibold">Fast</h3>
    <p class="mt-2 text-sm text-gray-600">Only the CSS you use is generated.</p>
  </article>
  <!-- two more <article> just like it -->
</div>

2. Add responsive variants

The nav collapses on small screens; the card grid goes from one column to two to three.

<header class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
  <a href="/" class="text-lg font-bold">Acme</a>
  <button class="sm:hidden" aria-label="Menu">&#9776;</button>
  <nav class="hidden gap-6 text-sm font-medium sm:flex">
    <a href="/features">Features</a>
    <a href="/pricing">Pricing</a>
    <a href="/docs">Docs</a>
  </nav>
</header>

<section class="mx-auto max-w-3xl px-6 py-12 text-center sm:py-16 lg:py-24">
  <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl lg:text-5xl">Ship your site faster</h1>
  <p class="mt-4 text-gray-600">Utility-first CSS, no context switching.</p>
</section>

<div class="mx-auto grid max-w-5xl gap-6 px-6 pb-16 sm:grid-cols-2 lg:grid-cols-3">
  <!-- <article> cards -->
</div>

3. Add states and dark mode

<a href="/start"
   class="mt-8 inline-block rounded-md bg-sky-600 px-5 py-2.5 font-semibold text-white
          transition hover:bg-sky-500
          focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600">
  Get started
</a>

<body class="bg-white text-gray-900 dark:bg-slate-900 dark:text-slate-100">
  <header class="&#8230; border-gray-200 dark:border-slate-800">&#8230;</header>
  <article class="&#8230; border-gray-200 hover:shadow-md dark:border-slate-800 dark:bg-slate-800/50">&#8230;</article>
</body>

4. Extract the repeated card

Once a class list repeats, move it into a component of whatever framework you use — not @apply.

function Feature({ title, children }) {
  return (
    <article className="rounded-xl border border-gray-200 p-6 hover:shadow-md
                        dark:border-slate-800 dark:bg-slate-800/50">
      <h3 className="font-semibold">{title}</h3>
      <p className="mt-2 text-sm text-gray-600 dark:text-slate-400">{children}</p>
    </article>
  );
}

5. One theme customization

Add a brand colour and display font once; every *-brand / font-display utility now exists.

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.55 0.2 264);
  --font-display: "Satoshi", ui-sans-serif, sans-serif;
}
<h1 class="font-display text-4xl font-extrabold">Ship your site faster</h1>
<a href="/start" class="rounded-md bg-brand px-5 py-2.5 font-semibold text-white hover:bg-brand/90">
  Get started
</a>

Related pages