Build a first responsive page
Start with structure, then spacing, then typography, then color. This order makes layout bugs easier to diagnose. Utilities are deliberately composable: mx-auto max-w-5xl px-4 centers a container, constrains its width, and adds horizontal padding.
The sample below uses a mobile-first layout. The base classes apply at every width; sm:, md:, and other breakpoint prefixes override or add behavior at and above their breakpoint.
A first Tailwind page
<div class="min-h-screen bg-slate-50 text-slate-900">
<header class="border-b border-slate-200 bg-white">
<div class="mx-auto flex max-w-5xl items-center justify-between px-4 py-4">
<a class="text-lg font-bold tracking-tight" href="/">TaskFlow</a>
<a class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" href="#tasks">
View tasks
</a>
</div>
</header>
<main class="mx-auto max-w-5xl px-4 py-10">
<p class="text-sm font-semibold uppercase tracking-wider text-blue-700">Your workspace</p>
<h1 class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">Make progress visible.</h1>
<p class="mt-4 max-w-2xl text-base leading-7 text-slate-600">
Organize work, focus on the next action, and celebrate completed tasks.
</p>
</main>
</div>đź’ˇ
min-h-screen establishes a viewport-height canvas. max-w-5xl mx-auto creates a centered content column. px-4 protects content from touching small screen edges. Typography utilities set hierarchy and readability. hover: and focus-visible: provide pointer and keyboard interaction feedback.Key Takeaways
- Build layout before adding decorative details.
- Use a centered max-width container for readable page content.
- Include visible keyboard focus styles for interactive controls.