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 |
Shell Skeleton
<div>
<div class="lg:pl-72">
<main class="py-10"><div class="px-4 sm:px-6 lg:px-8">...</div></main>
</div>
</div>
2. Sidebar Patterns
Sidebar Variants
| Variant |
Key Classes |
Behavior |
| Fixed light |
fixed inset-y-0 left-0 z-50 w-72 bg-white border-r border-gray-200 |
Always visible on desktop |
| Fixed dark |
fixed inset-y-0 left-0 z-50 w-72 bg-gray-900 |
Dark background, light text |
| Collapsible |
w-72 expanded / w-16 collapsed, controlled by state |
Toggle between full and icon-only |
| With secondary nav |
Primary nav left + nested sub-nav panel |
Two-level navigation |
| With expandable sections |
Headless UI Disclosure for grouped nav items |
Accordion-style nav groups |
Desktop Sidebar Structure
| Element |
Classes |
Purpose |
| Container |
fixed inset-y-0 left-0 z-50 w-72 hidden lg:flex lg:flex-col |
Fixed positioning, hidden on mobile |
| Inner wrapper |
flex grow flex-col gap-y-5 overflow-y-auto px-6 pb-4 |
Scrollable nav content |
| Logo area |
flex h-16 shrink-0 items-center |
Top branding |
| Nav list |
flex flex-1 flex-col with <ul role="list"> |
Semantic navigation |
| Active item |
bg-gray-50 text-indigo-600 (light) / bg-gray-800 text-white (dark) |
Current page indicator |
| Inactive item |
text-gray-700 hover:text-indigo-600 hover:bg-gray-50 |
Default state |
Mobile Sidebar (Off-Canvas Dialog)
| Element |
Classes / Component |
Purpose |
| Overlay |
Dialog with fixed inset-0 z-50 backdrop |
Blocks interaction with main content |
| Backdrop |
Transition with opacity animation |
Dim background |
| Panel |
fixed inset-y-0 left-0 z-50 w-full max-w-xs or w-72 |
Slide-in sidebar |
| Close button |
absolute top-0 right-0 -mr-12 pt-2 or inside panel |
Dismiss sidebar |
| Transition |
translate-x from -full to 0 |
Slide animation |
Mobile sidebar must use Headless UI Dialog (or equivalent) for accessibility: focus trapping, Escape to close, aria attributes.
Sidebar Navigation Item States
| State |
Light Theme |
Dark Theme |
| Active |
bg-gray-50 text-indigo-600 font-semibold |
bg-gray-800 text-white |
| Inactive |
text-gray-700 hover:bg-gray-50 hover:text-indigo-600 |
text-gray-400 hover:bg-gray-800 hover:text-white |
| Icon (active) |
text-indigo-600 |
text-white |
| Icon (inactive) |
text-gray-400 group-hover:text-indigo-600 |
text-gray-400 group-hover:text-white |
3. Navigation Patterns
Navigation Types
| Type |
Structure |
Key Classes |
Responsive Behavior |
| Top navbar |
nav with logo + links + actions |
sticky top-0 z-40 bg-white border-b |
Collapse to hamburger below lg |
| Sidebar nav |
Vertical link list with optional icons |
Inside fixed sidebar container |
Becomes off-canvas Dialog on mobile |
| Breadcrumbs |
<ol> with <li> items + separators |
flex items-center gap-x-2 |
Truncate middle items on mobile |
| Pagination |
Page numbers with prev/next buttons |
flex items-center justify-between |
Simplify to prev/next only on mobile |
| Tabs |
role="tablist" with role="tab" buttons |
border-b border-gray-200 tab bar |
Horizontal scroll or convert to dropdown |
| Vertical nav |
Stacked links in a sidebar or column |
flex flex-col gap-y-1 |
Remains vertical; may move to top on mobile |
| Command palette |
Search input + filtered results list |
Dialog with Combobox, fixed inset-0 z-50 |
Full-screen overlay on all sizes |
Breadcrumb Structure
<nav aria-label="Breadcrumb">
<ol role="list" class="flex items-center gap-x-2">
<li><a href="/" class="text-gray-500 hover:text-gray-700">Home</a></li>
<li class="flex items-center gap-x-2">
<svg class="h-5 w-5 text-gray-300"></svg>
<a href="/section" class="text-gray-500 hover:text-gray-700">Section</a>
</li>
<li class="flex items-center gap-x-2">
<svg class="h-5 w-5 text-gray-300"></svg>
<span class="text-gray-900 font-medium" aria-current="page">Current</span>
</li>
</ol>
</nav>
Pagination Structure
| Element |
Classes |
Notes |
| Container |
flex items-center justify-between border-t border-gray-200 px-4 py-3 |
Bottom of list |
| Mobile view |
flex flex-1 justify-between sm:hidden |
Prev/Next buttons only |
| Desktop view |
hidden sm:flex sm:flex-1 sm:items-center sm:justify-between |
Full page numbers |
| Active page |
bg-indigo-600 text-white |
Current page indicator |
| Inactive page |
text-gray-900 ring-1 ring-gray-300 hover:bg-gray-50 |
Clickable page numbers |
| Results text |
text-sm text-gray-700 |
“Showing 1 to 10 of 97 results” |
Tab Navigation
| Element |
Role / Attribute |
Classes |
| Tab container |
role="tablist" |
flex border-b border-gray-200 |
| Tab button |
role="tab", aria-selected, aria-controls |
px-4 py-2 text-sm font-medium |
| Active tab |
aria-selected="true" |
border-b-2 border-indigo-500 text-indigo-600 |
| Inactive tab |
aria-selected="false" |
text-gray-500 hover:text-gray-700 hover:border-gray-300 |
| Tab panel |
role="tabpanel", aria-labelledby |
Content area below tabs |
4. Container and Content Patterns
Container Widths
| Pattern |
Classes |
Use Case |
| Standard constrained |
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 |
Most page content |
| Narrow content |
max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 |
Articles, forms |
| Wide content |
max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 |
Data-heavy dashboards |
| Full bleed |
No max-width constraint |
Hero sections, banners |
| Breakout from container |
Negative margins + full viewport width |
Full-bleed images inside constrained parent |
Content with Sidebar Offset
| Layout |
Approach |
| Fixed sidebar + constrained main |
Main has lg:pl-72, content inside uses max-w-7xl mx-auto |
| Sidebar + centered content |
flex-1 main area with mx-auto max-w-5xl inside |
| Full-width main with sidebar |
pl-72 on wrapper; content fills available space |
Responsive Padding Scale
| Breakpoint |
Horizontal Padding |
Typical Usage |
| Default (mobile) |
px-4 (1rem) |
Base padding |
sm (640px+) |
sm:px-6 (1.5rem) |
Tablet |
lg (1024px+) |
lg:px-8 (2rem) |
Desktop |
Always apply the full responsive padding chain: px-4 sm:px-6 lg:px-8 for consistent spacing across breakpoints.
Full-Bleed Breakout Pattern
When content lives inside a constrained container but a section needs to go full width:
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative left-1/2 right-1/2 -mx-[50vw] w-screen bg-gray-900 py-16">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
</div>
</div>
</div>
Vertical Spacing Between Sections
| Spacing |
Classes |
Use Case |
| Tight |
py-8 sm:py-12 |
Dense dashboard sections |
| Standard |
py-16 sm:py-24 |
Marketing page sections |
| Generous |
py-24 sm:py-32 |
Hero, major page breaks |
5. Grid Patterns
Grid Types
| Pattern |
Classes |
Use Case |
| Responsive columns |
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 |
Card grids, feature sections |
| Four-column |
grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 |
Dashboard stat cards |
| Auto-fit |
grid gap-6 with inline grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)) |
Self-adjusting card grids |
| Two-column asymmetric |
grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-8 or lg:grid-cols-3 with lg:col-span-2 + lg:col-span-1 |
Main + sidebar content |
| Form layout (7/5) |
grid grid-cols-1 lg:grid-cols-12 gap-8 with lg:col-span-7 + lg:col-span-5 |
Form + preview |
| Form layout (8/4) |
Same 12-col grid with lg:col-span-8 + lg:col-span-4 |
Content + aside |
Column Spanning
| Utility |
Effect |
col-span-full |
Span all columns (full-width row item) |
sm:col-span-2 |
Span 2 columns at sm+ |
lg:col-span-3 |
Span 3 columns at lg+ |
col-start-1 row-start-1 |
Place at specific grid position (enables overlapping) |
Layered Grid (Overlapping Elements)
Place multiple children at the same grid cell using explicit col-start-1 row-start-1 on each. Later DOM elements render on top. Useful for image overlays, card badges, or transition effects.
Grid vs Flexbox Decision
| Use Grid When |
Use Flexbox When |
| 2D layout (rows and columns) |
1D layout (single row or column) |
| Equal-sized card grids |
Distributing space among items |
| Complex column spanning needed |
Simple horizontal nav or toolbar |
| Overlapping elements |
Content of unknown/variable size |
| Defined track structure |
Items that should wrap naturally |
6. Sticky and Fixed Elements
Positioning Patterns
| Pattern |
Classes |
Notes |
| Sticky header |
sticky top-0 z-40 bg-white/95 backdrop-blur |
Stays at top during scroll |
| Fixed sidebar |
fixed inset-y-0 left-0 z-50 w-72 |
Always visible, out of flow |
| Sticky section header |
sticky top-16 z-30 bg-white |
Sticks below main header (top-16 = header height) |
| Sticky table header |
sticky top-0 z-10 bg-white on <thead> |
Table scrolls, header stays |
| Sticky footer |
sticky bottom-0 z-40 bg-white border-t |
Action bar at bottom of viewport |
| Fixed bottom bar |
fixed bottom-0 inset-x-0 z-50 |
Mobile action bar |
z-index Strategy
| Layer |
z-index |
Usage |
| Base content |
z-0 |
Default stacking |
| Sticky table headers |
z-10 |
Above table rows |
| Dropdowns, tooltips |
z-20 |
Above sticky elements |
| Sticky section headers |
z-30 |
Above dropdowns |
| Sticky page header |
z-40 |
Above section headers |
| Sidebar, off-canvas |
z-50 |
Above everything except modals |
| Modal/Dialog backdrop |
z-50 |
Full-screen overlay |
| Modal/Dialog content |
z-50 |
On top of backdrop (later in DOM) |
| Toast notifications |
z-[60] |
Above modals if needed |
Use Tailwind’s default z-* scale. Avoid arbitrary values (z-[999]) unless layering above third-party elements. Keep z-index assignments consistent across the project.
Scroll Behavior with Fixed/Sticky Elements
| Scenario |
Solution |
| Main content scrolls, sidebar fixed |
overflow-y-auto on main, fixed sidebar |
| Both sidebar and main scroll independently |
overflow-y-auto on both, both fixed or within flex container |
| Prevent body scroll when modal open |
Add overflow-hidden to <body> when Dialog is open |
| Smooth scroll to anchor |
scroll-smooth on <html> or scroll-behavior: smooth |
| Offset scroll target for sticky header |
scroll-mt-16 on target elements (matches header height) |
7. Responsive Layout Strategy
Mobile-First Approach
Write base styles for mobile, then layer up with breakpoint prefixes. Tailwind breakpoints are min-width by default.
| Breakpoint |
Prefix |
Min Width |
Typical Target |
| Default |
(none) |
0px |
Mobile phones |
| sm |
sm: |
640px |
Large phones, small tablets |
| md |
md: |
768px |
Tablets |
| lg |
lg: |
1024px |
Small desktops, laptops |
| xl |
xl: |
1280px |
Desktops |
| 2xl |
2xl: |
1536px |
Large desktops |
Common Responsive Shifts
| Element |
Mobile |
Desktop |
| Sidebar |
Hidden; Dialog off-canvas |
fixed inset-y-0 left-0 w-72 visible |
| Top nav links |
Hidden; hamburger menu |
hidden lg:flex lg:gap-x-6 visible |
| Grid columns |
grid-cols-1 |
sm:grid-cols-2 lg:grid-cols-3 |
| Stack direction |
flex flex-col |
lg:flex-row |
| Padding |
px-4 |
sm:px-6 lg:px-8 |
| Font size |
text-2xl |
sm:text-3xl lg:text-4xl |
Responsive Visibility
| Pattern |
Classes |
Purpose |
| Show on desktop only |
hidden lg:flex or hidden lg:block |
Desktop nav, sidebar |
| Show on mobile only |
lg:hidden |
Hamburger button, mobile nav |
| Hide completely |
hidden |
Controlled by JS state |
| Show with flex |
hidden sm:flex |
Flex container at breakpoint |
8. Page Section Patterns
Hero Section
| Element |
Classes |
Notes |
| Container |
relative isolate overflow-hidden |
Background effects contained |
| Inner |
mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32 |
Responsive padding |
| Heading |
text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight |
Responsive sizing |
| Subheading |
mt-6 text-lg text-gray-600 max-w-2xl |
Constrained width for readability |
| CTA group |
mt-10 flex items-center gap-x-6 |
Button row |
Feature Grid
| Variant |
Structure |
| 3-column icon grid |
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 with icon + title + description per cell |
| 2-column with image |
grid grid-cols-1 lg:grid-cols-2 gap-12 items-center with text block + image |
| Alternating rows |
Repeat 2-column grid, swap order with lg:order-first / lg:order-last |
Split Layout (Text + Image)
| Element |
Classes |
| Container |
grid grid-cols-1 lg:grid-cols-2 gap-12 items-center |
| Text column |
max-w-lg or unconstrained within grid cell |
| Image column |
aspect-[4/3] overflow-hidden rounded-xl or aspect-video |
| Reverse order |
Add lg:order-first on the image column |
List/Detail Split View
| Element |
Classes |
Notes |
| Container |
flex min-h-screen |
Full height |
| List panel |
w-96 border-r overflow-y-auto |
Fixed width, scrollable |
| Detail panel |
flex-1 overflow-y-auto |
Fills remaining space |
| Mobile |
Show list or detail (not both); use routing or state to toggle |
Single-panel view |
Settings Page with Sidebar Tabs
| Element |
Classes |
| Container |
grid grid-cols-1 lg:grid-cols-[220px_1fr] gap-8 |
| Tab list |
flex lg:flex-col gap-1 |
| Active tab |
bg-gray-100 text-gray-900 font-medium rounded-md px-3 py-2 |
| Content panel |
min-w-0 (prevents overflow in grid) |
9. Common Anti-Patterns
| Anti-Pattern |
Problem |
Solution |
Fixed pixel widths (w-[400px]) |
Breaks on smaller screens |
Use responsive classes: w-full lg:w-96 |
| Missing mobile navigation |
Sidebar/nav disappears below breakpoint |
Add Dialog-based off-canvas menu for mobile |
Arbitrary z-index values (z-[9999]) |
Unpredictable stacking, conflicts |
Follow consistent z-index scale (10/20/30/40/50) |
| Sidebar not accessible on mobile |
Keyboard/screen reader users cannot navigate |
Use Headless UI Dialog with focus trapping |
| Content overflow on small screens |
Horizontal scroll, clipped text |
Use overflow-hidden, truncate, min-w-0 on flex/grid children |
Hardcoded sidebar offset (ml-72) |
Breaks when sidebar width changes |
Use lg:pl-72 matching sidebar w-72; update both together |
Missing min-h-screen on shell |
Footer floats mid-page on short content |
Add min-h-screen to outermost flex container |
| Sticky header without background |
Content shows through header on scroll |
Add bg-white or bg-white/95 backdrop-blur |
Grid without min-w-0 on children |
Long content overflows grid cell |
Add min-w-0 to grid children that may contain long text |
| Inline styles for layout |
Inconsistent with utility-first approach |
Use Tailwind classes; use arbitrary values [] only as last resort |
Nav without aria-label |
Poor screen reader experience |
Add aria-label="Main navigation" or similar to <nav> elements |
Forgetting isolate on hero/sections |
Background effects bleed into adjacent sections |
Add isolate to create new stacking context |
MCP Component Library
The frontend-components MCP server provides layout-related components:
- HyperUI (
hyperui): Application layouts (side-menu, vertical-menu, grids, tabs), marketing layouts (headers, footers, sections, banners)
- DaisyUI (
daisyui): Drawer, navbar, footer, hero, dock, divider class references
- FlyonUI (
flyonui): Navbar, drawer, footer CSS components
Layout search: search_components(query: "sidebar", framework: "hyperui") or list_components(framework: "hyperui", category: "application") to browse application layout components.