Sidebar Layout with Calc

Achieve a maintainable sidebar layout with a fixed position and dynamic main content using TailwindCSS and the `calc` function.

Main Content

Why Use calc for Sidebar Layouts?

Creating a sidebar with a fixed position ensures it remains visible while scrolling through the page, offering better navigation or utility. Using the calc function, you can allocate the remaining space dynamically to the main content, ensuring the layout adapts perfectly without needing manual adjustments.

Approaches to Sidebar Layouts

TailwindCSS Spacing Values
CSS Custom Properties (Variables)

1. Using TailwindCSS Spacing Values

Here’s how you can create a fixed sidebar layout with a dynamic main content area:

<body class="relative w-full h-96">
    <aside class="fixed inset-y-0 left-0 p-4 w-44 bg-gray-50 dark:bg-gray-925">
        <span class="text-caption text-sm">Sidebar </span>
    </aside>
    <main class="bg-white p-4 w-[calc(100%-11rem)] ml-auto h-full border-l dark:bg-gray-900">
        <span class="text-caption text-sm">Main Content </span>
    </main>
</body>

Key Points:

Fixed Position: The fixed class ensures the sidebar stays in place as you scroll.
Dynamic Width: The calc function dynamically adjusts the width of the main content area (calc(100% - 11rem)) to fit alongside the sidebar.

Using Theme Variables

TailwindCSS’s theme variables make layouts more maintainable by referencing your design system values directly.

<body class="relative w-full h-96">
    <aside class="fixed inset-y-0 left-0 p-4 w-44 bg-gray-50 dark:bg-gray-925">
        <span class="text-caption text-sm">Sidebar </span>
    </aside>
    <main class="bg-white p-4 w-[calc(100%-var(--spacing-44))] ml-auto h-full border-l dark:bg-gray-900">
        <span class="text-caption text-sm">Main Content </span>
    </main>
</body>

Why Use Theme Variables?

Consistency: Automatically matches your spacing scale in TailwindCSS.
Maintainability: Update your design tokens in one place, and the layout adjusts everywhere.

2. Using CSS Custom Properties (Variables)

CSS variables make the layout even more dynamic by allowing you to set and reuse the sidebar width across multiple components.

<body class="relative w-full h-96 [--sidebar-width:--spacing(44)]">
   <aside class="fixed inset-y-0 left-0 p-4 w-(--sidebar-width) bg-gray-50 dark:bg-gray-925">
       <span class="text-caption text-sm">Sidebar </span>
   </aside>
   <main class="bg-white p-4 w-[calc(100%-var(--sidebar-width))] ml-auto h-full border-l dark:bg-gray-900">
       <span class="text-caption text-sm">Main Content </span>
   </main>
</body>

Why Use CSS Variables?

Dynamic Adjustments: Easily change the sidebar width by updating the —sidebar-width value.
Reusability: Use the same variable in multiple components for consistent design.

TailwindCSS v4 with Built-in `theme` Variables

TailwindCSS v4 introduces built-in theme variables, making it even easier to use calc with your spacing values.

<body class="relative w-full h-96">
    <aside class="fixed inset-y-0 left-0 p-4 w-(--spacing-44) bg-gray-50 dark:bg-gray-925">
        <span class="text-caption text-sm">Sidebar </span>
    </aside>
    <main class="bg-white p-4 w-[calc(100%-var(--spacing-44))] ml-auto h-full border-l dark:bg-gray-900">
        <span class="text-caption text-sm">Main Content </span>
    </main>
</body>

By using the calc function in TailwindCSS, you can create flexible layouts that keep your sidebar in place while ensuring the main content fits dynamically. This approach is perfect for modern web designs where usability and maintainability are key! 🚀

On this page