Order and self-alignment in Tailwind - Mini Project: Build & Apply

Order and Self-Alignment with Tailwind CSS

📖 Scenario: You are creating a simple webpage section that shows three colored boxes in a row. You want to control the order of these boxes and align one box differently from the others.

🎯 Goal: Build a horizontal row of three boxes using Tailwind CSS. Change the order so the green box appears first. Align the blue box to the end of the row by itself.

📋 What You'll Learn

Use a flex container to arrange boxes horizontally

Create three boxes with background colors: red, green, and blue

Use Tailwind's order utilities to make the green box appear first

Use Tailwind's self-end utility to align the blue box to the bottom of the container

Ensure the layout is responsive and uses semantic HTML

💡 Why This Matters

🌍 Real World

Web developers often need to control the order and alignment of elements in a layout to create visually appealing and accessible designs.

💼 Career

Understanding flexbox order and self-alignment with Tailwind CSS is essential for front-end developers building responsive and user-friendly interfaces.

1

Create the HTML structure with three colored boxes

Create a <section> with a flex container <div>. Inside it, add three <div> boxes with these exact background colors using Tailwind classes: bg-red-500, bg-green-500, and bg-blue-500. Each box should have fixed width w-24 and height h-24. Use semantic HTML and add aria-label to each box describing its color.

Tailwind

Need a hint?

Use a flex container to place boxes side by side. Use Tailwind classes for background color and size. Add aria-label for accessibility.

2

Add order utility to make the green box appear first

Add the Tailwind class order-first to the green box <div> to make it appear first in the row. Leave the red and blue boxes with default order.

Tailwind

Need a hint?

Use the order-first class on the green box to move it before the others in the flex row.

3

Align the blue box to the bottom using self-alignment

Add the Tailwind class self-end to the blue box <div> to align it to the bottom of the flex container. Keep the other boxes unchanged.

Tailwind

Need a hint?

Use self-end on the blue box to align it to the bottom inside the flex container.

4

Add vertical height to the container for visible alignment effect

Add the Tailwind class h-32 to the flex container <div> to give it vertical height so the blue box's bottom alignment is visible.

Tailwind

Need a hint?

Adding h-32 to the flex container gives it height so you can see the blue box aligned at the bottom.