30 Tailwind CSS Sidebar Layouts
27 / 30

All 30 in 30 Tailwind CSS Sidebar Layouts

  1. 01Tailwind SaaS Dashboard Sidebar with Native Dark Mode Switch
  2. 02Tailwind Collapsible Admin Sidebar with Icon Tooltips
  3. 03Tailwind Documentation Sidebar with Multi-Level :target Tree
  4. 04Tailwind Responsive Sidebar to Bottom Navigation Switch Layout
  5. 05Tailwind Analytics Sidebar with CSS Subgrid Column Alignment
  6. 06Tailwind Animated Collapsible Sidebar with Icon-Only Mode
  7. 07Tailwind Sticky Sidebar Layout with Scroll-Driven Progress Bar
  8. 08Tailwind Pure CSS Collapsible Sidebar Drawer without JavaScript
  9. 09Tailwind Fixed Sidebar Layout with Independently Scrolling Content
  10. 10Tailwind Off-Canvas Navigation Drawer with the Popover API
  11. 11Tailwind Right-Aligned Sidebar Layout for Inspector Panels
  12. 12Tailwind Two-Pane Webmail Layout with List and Reading Pane
  13. 13Tailwind Dual Sidebar App Shell with Left Nav and Context Panel
  14. 14Tailwind Mini Icon Rail Sidebar with Anchor-Positioned Active Pill
  15. 15Tailwind E-Commerce Filter Sidebar with Native Details Accordion
  16. 16Tailwind Floating Glassmorphism Sidebar with Gradient Hairline
  17. 17Tailwind Sidebar Menu with Pinned User Profile Footer
  18. 18Tailwind Push-Content Sidebar Drawer with GPU Transitions
  19. 19Tailwind Off-Canvas Cart Overlay with Blurred Backdrop Scrim
  20. 20Tailwind Sidebar with Persistent Collapsed State in localStorage
  21. 21Tailwind Sidebar with Sticky Search Bar Inside the Rail
  22. 22Tailwind Section-Grouped Sidebar Navigation with Header Labels
  23. 23Tailwind Sliding Active Indicator Sidebar with CSS :target
  24. 24Tailwind Multi-Level Nested Tree Sidebar with Details Branches
  25. 25Tailwind Tabbed Sidebar with Radio-Driven Panel Switching
  26. 26Tailwind Onboarding Wizard Sidebar with Step Progress Tracking
  27. 27Tailwind Resizable Sidebar Layout Using the CSS Resize Property
  28. 28Tailwind Three-Pane Workspace Shell with Icon Rail and List
  29. 29Tailwind Adaptive Sidebar Layout Using CSS Container Queries
  30. 30Tailwind Frosted Glass Floating Sidebar with Animated Aurora
Pure TailwindMIT licensed

Tailwind Resizable Sidebar Layout Using the CSS Resize Property

Drag-to-resize with no pointer listeners, no drag maths: resize-x plus overflow-auto and a min/max fence, and the browser runs the entire interaction. Tailwind ships the resize utility, so the whole mechanism is three classes.

Live Demo
Plain CSSTailwind v4
Try it

Mosaic by Cruip: a complete Tailwind admin dashboard template in HTML, React, Next.js and Vue · $69

Cruip · Mosaic by Cruip · Affiliate link

View Mosaic dashboard

The code

<section class="tsl-27 w-full h-svh min-h-svh flex font-tsl27-sans bg-tsl27-bg text-tsl27-ink">
  <aside aria-label="Notes" class="relative flex-none w-[280px] min-w-[200px] max-w-[440px] resize-x overflow-auto bg-tsl27-panel border-r border-tsl27-line">
    <div class="min-w-[186px] px-3.5 py-5">
      <h2 class="px-2.5 pb-3.5 text-[14.5px] font-bold tracking-tight">Notebook</h2>
      <nav class="flex flex-col gap-0.5">
        <a href="#" aria-current="page" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium leading-snug truncate text-tsl27-mut no-underline transition-colors duration-150 hover:text-tsl27-ink hover:bg-tsl27-hover aria-[current=page]:text-tsl27-accent aria-[current=page]:bg-tsl27-tint focus-visible:outline-2 focus-visible:outline-tsl27-accent focus-visible:outline-offset-1">Container queries field guide</a>
        <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium leading-snug truncate text-tsl27-mut no-underline transition-colors duration-150 hover:text-tsl27-ink hover:bg-tsl27-hover focus-visible:outline-2 focus-visible:outline-tsl27-accent focus-visible:outline-offset-1">Subgrid recipes</a>
        <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium leading-snug truncate text-tsl27-mut no-underline transition-colors duration-150 hover:text-tsl27-ink hover:bg-tsl27-hover focus-visible:outline-2 focus-visible:outline-tsl27-accent focus-visible:outline-offset-1">The :has() cookbook</a>
        <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium leading-snug truncate text-tsl27-mut no-underline transition-colors duration-150 hover:text-tsl27-ink hover:bg-tsl27-hover focus-visible:outline-2 focus-visible:outline-tsl27-accent focus-visible:outline-offset-1">Anchor positioning notes</a>
        <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium leading-snug truncate text-tsl27-mut no-underline transition-colors duration-150 hover:text-tsl27-ink hover:bg-tsl27-hover focus-visible:outline-2 focus-visible:outline-tsl27-accent focus-visible:outline-offset-1">View transitions research</a>
      </nav>
    </div>
    <span aria-hidden="true" class="absolute inset-y-0 right-0 w-3.5 pointer-coarse:w-[22px] flex flex-col items-center justify-center gap-[3px] cursor-col-resize opacity-50 transition-opacity duration-200 hover:opacity-100 motion-reduce:transition-none">
      <i class="w-[3px] h-[3px] rounded-full bg-tsl27-mut"></i><i class="w-[3px] h-[3px] rounded-full bg-tsl27-mut"></i><i class="w-[3px] h-[3px] rounded-full bg-tsl27-mut"></i>
    </span>
  </aside>
  <main class="flex-1 min-w-0 p-8 overflow-y-auto [scrollbar-gutter:stable]">
    <h1 class="text-[22px] font-semibold leading-tight mb-2.5">Container queries field guide</h1>
    <p class="max-w-[54ch] text-sm leading-[1.65] text-tsl27-mut text-pretty">Drag the sidebar's bottom-right corner (or along the dotted grip) &mdash; <code class="font-tsl27-mono text-[12.5px]">resize-x</code> plus a min/max fence, zero drag JavaScript. The pane you are reading reflows live.</p>
  </main>
</section>
@import "tailwindcss";

@theme {
  --color-tsl27-bg: #141310;
  --color-tsl27-bg: oklch(0.13 0.012 85);
  --color-tsl27-panel: #1c1a15;
  --color-tsl27-panel: oklch(0.17 0.014 85);
  --color-tsl27-ink: #efece4;
  --color-tsl27-ink: oklch(0.94 0.006 85);
  --color-tsl27-mut: #a5a08f;
  --color-tsl27-mut: oklch(0.66 0.015 85);
  --color-tsl27-line: #3c382d;
  --color-tsl27-line: oklch(0.29 0.018 85);
  --color-tsl27-accent: #e2c559;
  --color-tsl27-accent: oklch(0.8 0.13 90);
  --color-tsl27-hover: rgb(239 236 228 / 0.06);
  --color-tsl27-hover: color-mix(in oklab, oklch(0.94 0.006 85) 6%, transparent);
  --color-tsl27-tint: rgb(226 197 89 / 0.13);
  --color-tsl27-tint: color-mix(in oklab, oklch(0.8 0.13 90) 13%, transparent);
  --font-tsl27-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tsl27-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tsl-27 {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  color-scheme: dark;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tsl27-bg: #141310;
  --color-tsl27-bg: oklch(0.13 0.012 85);
  --color-tsl27-panel: #1c1a15;
  --color-tsl27-panel: oklch(0.17 0.014 85);
  --color-tsl27-ink: #efece4;
  --color-tsl27-ink: oklch(0.94 0.006 85);
  --color-tsl27-mut: #a5a08f;
  --color-tsl27-mut: oklch(0.66 0.015 85);
  --color-tsl27-line: #3c382d;
  --color-tsl27-line: oklch(0.29 0.018 85);
  --color-tsl27-accent: #e2c559;
  --color-tsl27-accent: oklch(0.8 0.13 90);
  --color-tsl27-hover: rgb(239 236 228 / 0.06);
  --color-tsl27-hover: color-mix(in oklab, oklch(0.94 0.006 85) 6%, transparent);
  --color-tsl27-tint: rgb(226 197 89 / 0.13);
  --color-tsl27-tint: color-mix(in oklab, oklch(0.8 0.13 90) 13%, transparent);
  --font-tsl27-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tsl27-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tsl-27 {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  color-scheme: dark;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • resize-x overflow-auto sitting side by side in one class list is a small but real improvement on the CSS version, where the two declarations could drift apart in a stylesheet and the feature would silently stop working.
  • pointer-coarse: is a first-class variant, so the touch affordance widening is declared on the grip rather than in a trailing media query.
  • UI change from the CSS original: rows are min-h-11 and use truncate, so narrowing the rail to its 200px floor ellipsises long note titles instead of clipping them mid-glyph.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Resizable Sidebar Layout Using the CSS Resize Property
Source: https://codefronts.com/layouts/tailwind-css-sidebar-layouts/tailwind-resizable-sidebar-css-resize-property/

Drag-to-resize with no pointer listeners, no drag maths: resize-x plus overflow-auto and a min/max fence, and the browser runs the entire interaction. Tailwind ships the resize utility, so the whole mechanism is three classes.
## HTML
```html
<section class="tsl-27 w-full h-svh min-h-svh flex font-tsl27-sans bg-tsl27-bg text-tsl27-ink">
  <aside aria-label="Notes" class="relative flex-none w-[280px] min-w-[200px] max-w-[440px] resize-x overflow-auto bg-tsl27-panel border-r border-tsl27-line">
    <div class="min-w-[186px] px-3.5 py-5">
      <h2 class="px-2.5 pb-3.5 text-[14.5px] font-bold tracking-tight">Notebook</h2>
      <nav class="flex flex-col gap-0.5">
        <a href="#" aria-current="page" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium leading-snug truncate text-tsl27-mut no-underline transition-colors duration-150 hover:text-tsl27-ink hover:bg-tsl27-hover aria-[current=page]:text-tsl27-accent aria-[current=page]:bg-tsl27-tint focus-visible:outline-2 focus-visible:outline-tsl27-accent focus-visible:outline-offset-1">Container queries field guide</a>
        <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium leading-snug truncate text-tsl27-mut no-underline transition-colors duration-150 hover:text-tsl27-ink hover:bg-tsl27-hover focus-visible:outline-2 focus-visible:outline-tsl27-accent focus-visible:outline-offset-1">Subgrid recipes</a>
        <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium leading-snug truncate text-tsl27-mut no-underline transition-colors duration-150 hover:text-tsl27-ink hover:bg-tsl27-hover focus-visible:outline-2 focus-visible:outline-tsl27-accent focus-visible:outline-offset-1">The :has() cookbook</a>
        <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium leading-snug truncate text-tsl27-mut no-underline transition-colors duration-150 hover:text-tsl27-ink hover:bg-tsl27-hover focus-visible:outline-2 focus-visible:outline-tsl27-accent focus-visible:outline-offset-1">Anchor positioning notes</a>
        <a href="#" class="flex items-center min-h-11 px-3 rounded-[9px] text-[13.5px] font-medium leading-snug truncate text-tsl27-mut no-underline transition-colors duration-150 hover:text-tsl27-ink hover:bg-tsl27-hover focus-visible:outline-2 focus-visible:outline-tsl27-accent focus-visible:outline-offset-1">View transitions research</a>
      </nav>
    </div>
    <span aria-hidden="true" class="absolute inset-y-0 right-0 w-3.5 pointer-coarse:w-[22px] flex flex-col items-center justify-center gap-[3px] cursor-col-resize opacity-50 transition-opacity duration-200 hover:opacity-100 motion-reduce:transition-none">
      <i class="w-[3px] h-[3px] rounded-full bg-tsl27-mut"></i><i class="w-[3px] h-[3px] rounded-full bg-tsl27-mut"></i><i class="w-[3px] h-[3px] rounded-full bg-tsl27-mut"></i>
    </span>
  </aside>
  <main class="flex-1 min-w-0 p-8 overflow-y-auto [scrollbar-gutter:stable]">
    <h1 class="text-[22px] font-semibold leading-tight mb-2.5">Container queries field guide</h1>
    <p class="max-w-[54ch] text-sm leading-[1.65] text-tsl27-mut text-pretty">Drag the sidebar's bottom-right corner (or along the dotted grip) &mdash; <code class="font-tsl27-mono text-[12.5px]">resize-x</code> plus a min/max fence, zero drag JavaScript. The pane you are reading reflows live.</p>
  </main>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tsl27-bg: #141310;
  --color-tsl27-bg: oklch(0.13 0.012 85);
  --color-tsl27-panel: #1c1a15;
  --color-tsl27-panel: oklch(0.17 0.014 85);
  --color-tsl27-ink: #efece4;
  --color-tsl27-ink: oklch(0.94 0.006 85);
  --color-tsl27-mut: #a5a08f;
  --color-tsl27-mut: oklch(0.66 0.015 85);
  --color-tsl27-line: #3c382d;
  --color-tsl27-line: oklch(0.29 0.018 85);
  --color-tsl27-accent: #e2c559;
  --color-tsl27-accent: oklch(0.8 0.13 90);
  --color-tsl27-hover: rgb(239 236 228 / 0.06);
  --color-tsl27-hover: color-mix(in oklab, oklch(0.94 0.006 85) 6%, transparent);
  --color-tsl27-tint: rgb(226 197 89 / 0.13);
  --color-tsl27-tint: color-mix(in oklab, oklch(0.8 0.13 90) 13%, transparent);
  --font-tsl27-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tsl27-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tsl-27 {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  color-scheme: dark;
}
```

How this works

Three declarations create the interaction. The browser handles hit-testing, cursor, drag tracking and relayout natively — off the main thread, with no stuck-drag state to leak. In exchange you accept the native handle's position at the bottom-right corner; the full-height dotted grip here extends the affordance visually, and the honest limitation is documented rather than hidden.

The fence is the API. min-w-[200px] keeps nav labels whole; max-w-[440px] stops the rail eating the app. Both are arbitrary values because they are product constraints, not scale steps.

Make it yours

  • Persist the chosen width with a ResizeObserver plus localStorage (six lines) if users expect it remembered.
  • resize-y for horizontal split panes — bottom terminals, log viewers.
  • Style the native corner handle in WebKit via [&::-webkit-resizer]: for a branded grip.

Gotchas — read before shipping

  • resize without overflow does nothing. This is the single most common reason the property 'does not work'.
  • The element resizes its content box — under border-box sizing the fence includes padding.
  • resize is inert on touch-only devices; the JS upgrade path is the answer where touch resizing is a requirement.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

resize itself is fifteen years old and universal on desktop; the quoted floor is Tailwind v4's generated sheet.

Techniques used in this demo

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →