Justify content (main axis) in Tailwind - Mini Project: Build & Apply

Justify Content on Main Axis with Tailwind CSS

📖 Scenario: You are creating a simple webpage section that displays three colored boxes in a row. You want to control how these boxes are spaced horizontally using Tailwind CSS's justify-content utilities.

🎯 Goal: Build a horizontal row of three colored boxes inside a container. Use Tailwind CSS classes to set the container as a flexbox and apply different justify-content values to align the boxes along the main axis.

📋 What You'll Learn

Create a container <div> with Tailwind CSS flexbox class flex.

Add three child <div> boxes inside the container with distinct background colors and fixed width and height.

Add a Tailwind CSS class to the container to justify content along the main axis using justify-center.

Ensure the layout is responsive and the boxes remain horizontally aligned.

💡 Why This Matters

🌍 Real World

Web developers often need to align items horizontally in navigation bars, galleries, or toolbars. Using Tailwind CSS flexbox utilities makes this easy and consistent.

💼 Career

Understanding flexbox and justify-content is essential for front-end developers to create responsive, accessible layouts quickly using utility-first CSS frameworks like Tailwind.

1

Create the container and three boxes

Create a <div> container with the Tailwind CSS class flex. Inside it, create three child <div> elements with background colors bg-red-500, bg-green-500, and bg-blue-500. Each box should have fixed width w-24 and height h-24.

Tailwind

  
  
  Justify Content Example
  


  
  
    
    
    
  

Need a hint?

Use the Tailwind CSS class flex on the container to arrange children in a row. Give each box a background color and fixed size using bg-*, w-24, and h-24.

2

Add a justify-content configuration variable

Add a Tailwind CSS class justify-center to the container <div> to center the boxes horizontally along the main axis.

Tailwind

  
  
  Justify Content Example
  


  
  
    
    
    
  

Need a hint?

Use the Tailwind CSS class justify-center on the flex container to center the boxes horizontally.

3

Change justify-content to space-between

Replace the justify-center class on the container <div> with justify-between to space the boxes evenly with space between them.

Tailwind

  
  
  Justify Content Example
  


  
  
    
    
    
  

Need a hint?

Replace the justify-center class with justify-between to spread the boxes with space between them.

4

Add aria-label and responsive spacing

Add an aria-label="Color boxes container" attribute to the container <div> for accessibility. Also add the Tailwind CSS class gap-4 to add horizontal spacing between the boxes on all screen sizes.

Tailwind

  
  
  Justify Content Example
  


  
  
    
    
    
  

Need a hint?

Use the aria-label attribute on the container for screen readers. Add gap-4 class to create consistent spacing between boxes.