tailwind-layouts
Installation
SKILL.md
Tailwind Layouts
1. Application Shell Patterns
| Shell Type | Structure | Key Classes | Best For |
|---|---|---|---|
| Sidebar | Fixed sidebar + scrollable main | flex min-h-screen with fixed inset-y-0 w-72 sidebar + pl-72 flex-1 main |
Admin dashboards, SaaS apps |
| Stacked | Top nav + main content area | flex flex-col min-h-screen with sticky nav + flex-1 main |
Marketing sites, simple apps |
| Multi-column | Sidebar + main + secondary panel | flex min-h-screen with fixed sidebar + flex-1 center + w-80 right panel |
Email clients, detail views |
| Full-width stacked | Full-bleed nav + constrained content | Nav spans full width, content inside max-w-7xl mx-auto |
Content-heavy sites |
| Narrow sidebar | Icon-only sidebar + main | w-16 sidebar with tooltips, expands on hover or click |
Dense tool UIs |
Responsive Shell Behavior
| Breakpoint | Sidebar Shell | Stacked Shell |
|---|---|---|
Mobile (<lg) |
Sidebar hidden; off-canvas Dialog triggered by hamburger | Nav collapses to hamburger menu |
Desktop (lg+) |
Sidebar visible; main offset with lg:pl-72 |
Full horizontal nav visible |