0
0
Tailwindmarkup~5 mins

Sidebar with main content in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

A sidebar helps organize your page by putting navigation or extra info on the side. It keeps the main content clear and easy to read.

When you want to show a menu or links alongside your main page content.
When you want to keep important tools or info visible while users read the main area.
When you want a clean layout that works well on both big and small screens.
When you want to separate navigation from the main content visually.
When you want users to easily switch between sections without leaving the page.
Syntax
Tailwind
<div class="flex">
  <aside class="w-64 bg-gray-200 p-4">Sidebar content</aside>
  <main class="flex-1 p-4">Main content</main>
</div>

flex creates a horizontal layout.

w-64 sets the sidebar width, flex-1 makes main content fill the rest.

Examples
Sidebar with smaller width and different background color.
Tailwind
<div class="flex">
  <aside class="w-48 bg-blue-100 p-3">Menu</aside>
  <main class="flex-1 p-6">Content area</main>
</div>
Responsive layout: sidebar on top on small screens, side by side on medium and larger screens.
Tailwind
<div class="flex flex-col md:flex-row">
  <aside class="w-full md:w-56 bg-gray-300 p-4">Sidebar</aside>
  <main class="flex-1 p-4">Main content</main>
</div>
Sample Program

This page has a sidebar with navigation links on the left and main content on the right. The layout uses Tailwind's flex utilities for a clean side-by-side look. The sidebar has a fixed width, and the main content fills the rest of the screen. The main area is keyboard focusable for accessibility.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Sidebar with Main Content</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-white text-gray-900">
  <div class="flex min-h-screen">
    <aside class="w-64 bg-gray-100 p-6" aria-label="Sidebar">
      <nav>
        <ul class="space-y-4">
          <li><a href="#" class="block text-blue-600 hover:underline">Home</a></li>
          <li><a href="#" class="block text-gray-700 hover:text-blue-600">About</a></li>
          <li><a href="#" class="block text-gray-700 hover:text-blue-600">Services</a></li>
          <li><a href="#" class="block text-gray-700 hover:text-blue-600">Contact</a></li>
        </ul>
      </nav>
    </aside>
    <main class="flex-1 p-8" tabindex="0">
      <h1 class="text-3xl font-bold mb-4">Welcome to the Main Content</h1>
      <p>This area shows the main information. The sidebar on the left helps you navigate.</p>
    </main>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Use aria-label on the sidebar for screen readers.

Make main content focusable with tabindex="0" for keyboard users.

Use responsive classes like md:flex-row to adjust layout on different screen sizes.

Summary

A sidebar organizes navigation or extra info beside main content.

Use Tailwind's flex and width utilities to create side-by-side layouts.

Always consider accessibility and responsive design for a better user experience.