Align items (cross axis) in Tailwind - Mini Project: Build & Apply

Align Items on the Cross Axis with Tailwind CSS

📖 Scenario: You are creating a simple webpage section that shows three colored boxes side by side. You want to control how these boxes line up vertically inside their container.

🎯 Goal: Build a horizontal container with three boxes inside. Use Tailwind CSS to align these boxes vertically in the center of the container.

📋 What You'll Learn

Create a container with flex layout in a row direction

Add three boxes inside the container with distinct background colors

Use Tailwind CSS class to align the boxes vertically centered (cross axis)

Ensure the container and boxes have visible sizes to see alignment clearly

💡 Why This Matters

🌍 Real World

Aligning items vertically in a row is common in navigation bars, card layouts, and toolbars on websites.

💼 Career

Understanding flexbox alignment with Tailwind CSS is essential for front-end developers to build responsive and accessible user interfaces.

1

Create the HTML structure with a flex container and three boxes

Write the HTML code to create a <div> container with the Tailwind class flex. Inside it, add three <div> boxes with the classes w-24, h-24, and background colors bg-red-500, bg-green-500, and bg-blue-500 respectively.

Tailwind

Need a hint?

Use flex on the container and create three child divs with width and height 6rem (24 * 0.25rem) and different background colors.

2

Add a taller height to the container to see vertical alignment

Add the Tailwind class h-48 to the container <div> to make it taller so vertical alignment is visible.

Tailwind

Need a hint?

Use h-48 on the container to make it 12rem tall so you can see vertical alignment clearly.

3

Align the boxes vertically centered using Tailwind

Add the Tailwind class items-center to the container <div> to align the child boxes vertically in the center (cross axis).

Tailwind

Need a hint?

Use items-center on the flex container to align children vertically in the center.

4

Add accessible labels and responsive design

Add role="region" and aria-label="Color boxes container" to the container <div> for accessibility. Also add the Tailwind class sm:h-64 to make the container taller on small screens and above.

Tailwind

Need a hint?

Use role="region" and aria-label="Color boxes container" on the container for screen readers. Add sm:h-64 for taller height on small screens and larger.