Align Items in Tailwind CSS 4 – Complete Guide
When building layouts with Flexbox or Grid, it’s important to control how items are aligned vertically.
The align-items property controls how elements are positioned along the cross axis of a flex or grid container.
In Flexbox:
- Main Axis → Horizontal
- Cross Axis → Vertical
Tailwind CSS provides simple utilities to manage this alignment.
In this tutorial you will learn:
- What
align-itemsdoes - Tailwind
items-*utilities - Practical Flexbox and Grid examples
- Responsive alignment techniques
We will use the Tailwind CSS 4 browser CDN.
https://unpkg.com/@tailwindcss/browser@4
Step 1: Setup Tailwind CSS CDN
Create a simple HTML file and include Tailwind.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<h1 class="text-3xl font-bold mb-6">
Align Items in Tailwind CSS
</h1>
</body>
</html>
Now Tailwind classes are ready to use.
What is Align Items?
The align-items property controls how items align vertically inside a container.
Example in CSS:
align-items: center;
In Tailwind:
items-center
Tailwind Align Items Utilities
| Class | CSS Property |
|---|---|
| items-start | align-items: flex-start |
| items-end | align-items: flex-end |
| items-center | align-items: center |
| items-stretch | align-items: stretch |
| items-baseline | align-items: baseline |
| items-baseline-last | align-items: last baseline |
Example 1 – items-stretch
items-stretch stretches elements to fill the container height.
<div class="flex items-stretch gap-4 bg-gray-100 p-4 h-40">
<div class="bg-blue-500 text-white px-4 py-4">01</div>
<div class="bg-green-500 text-white px-4 py-12">02</div>
<div class="bg-red-500 text-white px-4 py-8">03</div>
</div>
Result:
All items stretch to fill the height of the container.
Example 2 – items-start
items-start aligns items at the top of the container.
<div class="flex items-start gap-4 bg-gray-100 p-4 h-40">
<div class="bg-blue-500 text-white py-4 px-4">01</div>
<div class="bg-green-500 text-white py-12 px-4">02</div>
<div class="bg-red-500 text-white py-8 px-4">03</div>
</div>
Result:
All items start from the top edge.
Example 3 – items-center
items-center aligns elements vertically in the center.
<div class="flex items-center gap-4 bg-gray-100 p-4 h-40">
<div class="bg-blue-500 text-white py-4 px-4">01</div>
<div class="bg-green-500 text-white py-12 px-4">02</div>
<div class="bg-red-500 text-white py-8 px-4">03</div>
</div>
Result:
Items appear centered vertically.
Example 4 – items-end
items-end aligns items at the bottom of the container.
<div class="flex items-end gap-4 bg-gray-100 p-4 h-40">
<div class="bg-blue-500 text-white py-4 px-4">01</div>
<div class="bg-green-500 text-white py-12 px-4">02</div>
<div class="bg-red-500 text-white py-8 px-4">03</div>
</div>
Result:
Items align at the bottom.
Example 5 – items-baseline
items-baseline aligns items based on their text baseline.
<div class="flex items-baseline gap-4 bg-gray-100 p-4">
<div class="text-sm bg-blue-500 text-white px-4 py-2">
Small Text
</div>
<div class="text-xl bg-green-500 text-white px-4 py-2">
Large Text
</div>
<div class="text-3xl bg-red-500 text-white px-4 py-2">
Extra Large
</div>
</div>
Result:
Text baselines align even if font sizes are different.
Example 6 – items-baseline-last
items-baseline-last aligns items using the last text baseline.
Example using grid:
<div class="grid grid-cols-[1fr_auto] items-baseline-last gap-4 bg-gray-100 p-6">
<div>
<h4 class="text-lg font-semibold">
Spencer Sharp
</h4>
<p>
Working on the future of astronaut recruitment at Space Recruit.
</p>
</div>
<p class="text-blue-600">
spacerecruit.com
</p>
</div>
This ensures text aligns correctly even when content heights differ.
Safe Alignment Utilities
Tailwind also provides safe alignment utilities.
Examples:
items-center-safe
items-end-safe
These prevent layout issues when space is limited.
Example:
<div class="flex items-center-safe gap-4">
If the container becomes too small, items automatically adjust to prevent overflow.
Responsive Align Items
Tailwind supports responsive alignment.
Example:
<div class="flex items-stretch md:items-center bg-gray-100 p-4 h-40">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
</div>
Behavior:
- Small screens → items stretch
- Medium screens → items center vertically
Practical Example – Navbar Alignment
<div class="flex items-center justify-between bg-blue-600 text-white p-4">
<div class="text-xl font-bold">
Logo
</div>
<div class="flex gap-6">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</div>
Here:
justify-betweencontrols horizontal spacingitems-centeraligns items vertically
Why Use Align Items in Tailwind?
Benefits include:
Better Vertical Alignment
Easily control vertical positioning of elements.
Cleaner Code
No need for custom CSS.
Responsive Layouts
Tailwind breakpoints make layouts flexible.
Faster UI Development
Align elements with a single utility class.
FAQs
1. What does align-items do?
The align-items property controls how elements align vertically inside a flex or grid container.
2. What is the difference between justify-content and align-items?
| Property | Axis |
|---|---|
| justify-content | Horizontal (main axis) |
| align-items | Vertical (cross axis) |
3. What does items-center do in Tailwind?
items-center vertically centers all items inside a flex or grid container.
4. When should I use items-stretch?
Use items-stretch when you want elements to expand to fill the container height.
5. Can align-items work with Grid?
Yes. Tailwind items-* utilities work with both Flexbox and Grid layouts.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.