Tailwind CSS cookbook · Intermediate
Build a dashboard layout with a sidebar
Create an app shell with a fixed-width sidebar, a top bar and a scrollable main area that adapts to small screens.
Approach
Use a grid with a fixed sidebar column from md: and a single column on phones. Make the main area scroll
independently with overflow-y-auto and a full-height container.
Solution
<div class="grid h-80 grid-rows-[auto_1fr] md:grid-cols-[13rem_1fr] md:grid-rows-1">
<aside class="bg-slate-900 p-4 text-slate-300">
<p class="mb-4 font-bold text-white">Camel Admin</p>
<nav class="flex gap-2 text-sm md:flex-col">
<a href="#" class="rounded-md bg-white/10 px-3 py-2 text-white">Dashboard</a>
<a href="#" class="rounded-md px-3 py-2 hover:bg-white/5">Orders</a>
<a href="#" class="rounded-md px-3 py-2 hover:bg-white/5">Settings</a>
</nav>
</aside>
<main class="overflow-y-auto bg-slate-50 p-6">
<h1 class="text-xl font-semibold">Dashboard</h1>
<div class="mt-4 grid gap-4 sm:grid-cols-3">
<div class="rounded-xl bg-white p-4 ring-1 ring-slate-200"><p class="text-sm text-slate-500">Revenue</p><p class="text-2xl font-bold">$12.4k</p></div>
<div class="rounded-xl bg-white p-4 ring-1 ring-slate-200"><p class="text-sm text-slate-500">Orders</p><p class="text-2xl font-bold">318</p></div>
<div class="rounded-xl bg-white p-4 ring-1 ring-slate-200"><p class="text-sm text-slate-500">Refunds</p><p class="text-2xl font-bold">4</p></div>
</div>
</main>
</div>
Pitfalls
- Using
h-screenon mobile; preferh-dvhso browser toolbars don't cut off content. - Forgetting
min-w-0on grid children that contain wide tables.
Variations
- Make the sidebar collapsible on phones with a
<details>element or a drawer component.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/grid-template-columns