Sidebar with main content in Tailwind - Mini Project: Build & Apply

Sidebar with main content

📖 Scenario: You are creating a simple webpage layout with a sidebar and main content area. The sidebar will have navigation links, and the main content will show a welcome message. This layout should be responsive and use Tailwind CSS for styling.

🎯 Goal: Build a webpage with a sidebar on the left and main content on the right using Tailwind CSS. The sidebar should have a vertical list of links, and the main content should have a heading and paragraph. The layout should be flexible and look good on different screen sizes.

📋 What You'll Learn

Use a div with Tailwind classes to create a sidebar on the left

Add three navigation links inside the sidebar with text: Home, About, Contact

Create a main content area to the right of the sidebar

Add a heading <h1> with text 'Welcome to the site!' inside the main content

Add a paragraph <p> with some welcome text inside the main content

Use Tailwind Flexbox classes to arrange sidebar and main content side by side

Make sure the sidebar has a background color and the main content has padding

Ensure the layout is responsive and stacks vertically on small screens

💡 Why This Matters

🌍 Real World

Sidebars with main content are common in websites and web apps for navigation and displaying information side by side. This layout helps users find links easily while reading content.

💼 Career

Knowing how to build responsive layouts with Tailwind CSS is valuable for frontend web development jobs. It shows you can create clean, accessible, and adaptable user interfaces.

1

Create the HTML structure with sidebar and main content containers

Create a div with class flex to hold the layout. Inside it, create two div elements: one with class sidebar and one with class main-content. Do not add any content or styles yet.

Tailwind

Hint

Use a parent div with class flex. Inside it, add two div elements with classes sidebar and main-content.

2

Add navigation links inside the sidebar

Inside the div with class sidebar, add an unordered list <ul> with three list items <li>. Each list item should contain a link <a> with the texts Home, About, and Contact respectively. Use href="#" for each link.

Tailwind

Hint

Use a <ul> inside the sidebar. Add three <li> each with an <a href="#"> link for Home, About, and Contact.

3

Add heading and paragraph inside the main content

Inside the div with class main-content, add a heading <h1> with the text Welcome to the site! and a paragraph <p> with the text This is the main content area..

Tailwind

  
    
      Home
      About
      Contact
    
  
  
    
  

Hint

Inside the main content div, add an <h1> and a <p> with the specified texts.

4

Add Tailwind CSS classes for layout and styling

Add Tailwind CSS classes to style the layout: add bg-gray-200 p-4 w-48 to the div with class sidebar for background color, padding, and fixed width. Add flex-1 p-6 to the div with class main-content for flexible width and padding. Add flex flex-col min-h-screen to the div with class sidebar to stack its content vertically and fill viewport height. Add flex flex-col space-y-4 to the ul inside the sidebar for vertical spacing between links. Add responsive classes flex-col md:flex-row to the parent div with class flex so the layout stacks vertically on small screens and side by side on medium and larger screens.

Tailwind

  
    
      Home
      About
      Contact
    
  
  
    Welcome to the site!
    This is the main content area.
  

Hint

Add the specified Tailwind CSS classes to the correct elements to style the sidebar and main content and make the layout responsive.

Practice

1. What is the main purpose of a sidebar in a web layout using Tailwind CSS?

easy

A. To replace the main content entirely

B. To add decorative images only

C. To organize navigation or extra information beside the main content

D. To hide content on all screen sizes

Solution

1. Step 1: Understand sidebar role

   A sidebar is typically used to hold navigation links or extra info next to main content.

2. Step 2: Compare options

   Only To organize navigation or extra information beside the main content correctly describes this purpose; others are incorrect uses of sidebars.

3. Final Answer:

   To organize navigation or extra information beside the main content -> Option C

4. Quick Check:

   Sidebar purpose = organize navigation/info [OK]

Hint: Sidebars hold extra info beside main content [OK]

Common Mistakes:

• Thinking sidebar replaces main content
• Using sidebar only for decoration
• Assuming sidebar hides content always

2. Which Tailwind CSS class combination correctly creates a horizontal layout with a sidebar and main content side by side?

easy

A. inline-block

B. block flex-col

C. grid grid-cols-1

D. flex flex-row

Solution

1. Step 1: Identify layout direction classes

   Tailwind's flex with flex-row arranges children horizontally side by side.

2. Step 2: Evaluate other options

   block flex-col stacks vertically, grid-cols-1 creates one column, and inline-block does not create a flex layout.

3. Final Answer:

   <code>flex flex-row</code> -> Option D

4. Quick Check:

   Horizontal layout = flex flex-row [OK]

Hint: Use flex with flex-row for horizontal side-by-side layout [OK]

Common Mistakes:

• Using flex-col for horizontal layout
• Using grid-cols-1 for two columns
• Using inline-block for layout

3. Given this Tailwind HTML snippet, what will be the width of the sidebar on a large screen?

<div class="flex">
  <aside class="w-1/4 bg-gray-200">Sidebar</aside>
  <main class="w-3/4 p-4">Main Content</main>
</div>

medium

A. 25% of the container width

B. 50% of the container width

C. 75% of the container width

D. 100% of the container width

Solution

1. Step 1: Understand width classes

   w-1/4 means the element takes one quarter (25%) of the container width.

2. Step 2: Confirm layout with flex

   Since the parent uses flex, the sidebar and main content sit side by side with widths 25% and 75% respectively.

3. Final Answer:

   25% of the container width -> Option A

4. Quick Check:

   w-1/4 = 25% width [OK]

Hint: w-1/4 means 25% width in Tailwind [OK]

Common Mistakes:

• Confusing w-1/4 with 1/2 or 75%
• Ignoring flex layout effect
• Assuming fixed pixel width

4. Identify the error in this Tailwind layout code for a sidebar and main content:

<div class="flex flex-col">
  <aside class="w-1/4 bg-blue-100">Sidebar</aside>
  <main class="w-3/4 p-4">Main Content</main>
</div>

medium

A. Missing background color on main content

B. Using flex-col stacks sidebar and main vertically, not side by side

C. w-1/4 and w-3/4 widths are invalid classes

D. flex class should be replaced with grid

Solution

1. Step 1: Analyze flex direction

   flex-col stacks children vertically, so sidebar and main appear one above the other.

2. Step 2: Check width classes and layout goal

   Widths w-1/4 and w-3/4 are valid but ignored in vertical stacking; to place side by side, flex-row is needed.

3. Final Answer:

   Using flex-col stacks sidebar and main vertically, not side by side -> Option B

4. Quick Check:

   flex-col stacks vertically, not side by side [OK]

Hint: Use flex-row for horizontal sidebar layout, not flex-col [OK]

Common Mistakes:

• Confusing flex-col with flex-row
• Thinking widths apply in vertical flex
• Ignoring layout direction effect

5. You want a sidebar that is hidden on small screens but visible on medium and larger screens, with main content filling the rest. Which Tailwind classes achieve this layout?

<div class="flex">
  <aside class="??? bg-gray-300">Sidebar</aside>
  <main class="??? p-4">Main Content</main>
</div>

hard

A. hidden md:block w-1/4 for aside and w-full md:w-3/4 for main

B. block w-1/4 for aside and w-3/4 for main

C. hidden w-1/4 for aside and w-full for main

D. md:hidden w-1/4 for aside and w-full md:w-3/4 for main

Solution

1. Step 1: Hide sidebar on small, show on medium+

   Use hidden md:block on aside to hide it on small screens and show from medium screens up.

2. Step 2: Set widths for responsive layout

   Sidebar gets w-1/4 on medium+ screens; main uses w-full on small and md:w-3/4 on medium+ to fill remaining space.

3. Final Answer:

   hidden md:block w-1/4 for aside and w-full md:w-3/4 for main -> Option A

4. Quick Check:

   Responsive show/hide + widths = hidden md:block w-1/4 for aside and w-full md:w-3/4 for main [OK]

Hint: Use hidden md:block and responsive widths for sidebar [OK]

Common Mistakes:

• Not hiding sidebar on small screens
• Using md:hidden instead of hidden md:block
• Not adjusting main content width responsively