Tailwindmarkup~30 mins

Margin utilities in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Margin Utilities with Tailwind CSS

📖 Scenario: You are creating a simple webpage with three colored boxes stacked vertically. You want to add space between these boxes using margin utilities from Tailwind CSS.

🎯 Goal: Build a webpage with three <div> boxes, each with a background color and margin below them using Tailwind CSS margin utilities.

📋 What You'll Learn

Use Tailwind CSS margin utilities to add vertical spacing between boxes

Each box should have a distinct background color

Use semantic HTML5 structure

Make sure the page is responsive and the boxes stack vertically with spacing

💡 Why This Matters

🌍 Real World

Web developers often need to add consistent spacing between elements to create clean, readable layouts. Using Tailwind CSS margin utilities with custom properties helps maintain design consistency and easy updates.

💼 Career

Understanding how to use Tailwind CSS margin utilities and accessibility attributes is important for front-end developers building user-friendly, maintainable websites.

Progress0 / 4 steps

Create the HTML structure with three boxes

Create a <main> element containing three <div> elements. Each <div> should have the classes bg-red-500, bg-green-500, and bg-blue-500 respectively. Also, add h-24 to each <div> to set their height.

Tailwind




  
  
  Margin Utilities Project

Need a hint?

Use three <div> elements inside <main>. Assign the exact classes bg-red-500 h-24, bg-green-500 h-24, and bg-blue-500 h-24 respectively.

Add margin bottom configuration variable

Create a <style> block inside the <head> and define a CSS custom property called --mb with the value 1.5rem. This will be used as the margin bottom size.

Tailwind




  
  
  Margin Utilities Project
  
  
    /* Define --mb variable here */

Need a hint?

Inside the <style> tag, write :root { --mb: 1.5rem; } to create the margin bottom variable.

Apply margin bottom using Tailwind's arbitrary value syntax

Add the Tailwind CSS margin bottom utility with the arbitrary value mb-[var(--mb)] to the first two <div> elements to create vertical spacing between the boxes.

Tailwind




  
  
  Margin Utilities Project
  
  
    :root {
      --mb: 1.5rem;
    }

Need a hint?

Add mb-[var(--mb)] to the class attribute of the first two <div> elements to add margin bottom using the CSS variable.

Add aria-labels for accessibility and finalize

Add an aria-label attribute to each <div> describing its color: Red box, Green box, and Blue box. This helps screen readers understand the content.

Tailwind




  
  
  Margin Utilities Project
  
  
    :root {
      --mb: 1.5rem;
    }

Need a hint?

Add aria-label="Red box", aria-label="Green box", and aria-label="Blue box" to the respective <div> elements.