Tailwind Align Items

In CSS Flexbox, the align-items property controls how flex items are vertically aligned inside a flex container along the cross-axis (which is usually vertical).

Tailwind CSS makes this super easy with its utility-first approach. Instead of writing custom CSS, you can simply add an items-{alignment} class to your container.

How to Apply Tailwind Align Items

To apply alignment, add the appropriate items-{alignment} class to your flex container. Here's the basic syntax:

<div class="flex items-center">
	<!-- Flex items here -->
</div>

Preview

Notice: You must set the container to flex using the flex class. Without it, items-center and similar utilities won't have any effect.

Tailwind Align Items Examples

Let's dive into some simple examples to see how each alignment looks in action

Center Items Vertically

<div class="flex items-center">
	<div class="bg-blue-500 h-8 w-8">Items 1</div>
	<div class="bg-blue-500 h-4 w-4">Items 2</div>
	<div class="bg-blue-500 h-6 w-6">Items 3</div>
</div>

Preview

items-start

Aligns flex items to the start of the container's cross-axis (top for a column layout).

<div
	class="flex items-start space-x-4 h-40 border border-indigo-100 rounded-t-xl p-4"
>
	<div class="bg-indigo-500 text-white p-2 rounded">A</div>
	<div class="bg-indigo-500 text-white p-6 rounded">B</div>
	<div class="bg-indigo-500 text-white p-10 rounded">C</div>
</div>

Preview

Useful for:

• Aligning multiple headers at the top.

• Keeping icons aligned in a sidebar.

items-end

Aligns items to the end (bottom).

<div
	class="flex items-end space-x-4 h-40 border border-red-100 rounded-t-xl p-4"
>
	<div class="bg-red-500 text-white p-2 rounded">A</div>
	<div class="bg-red-500 text-white p-6 rounded">B</div>
	<div class="bg-red-500 text-white p-10 rounded">C</div>
</div>

Preview

Useful for:

• Aligning a call-to-action button at the bottom of a card.

• Creating a sticky footer inside a container.

items-center

Centers items along the cross-axis.

<div
	class="flex items-center space-x-4 h-40 border border-green-100 rounded-t-xl p-4"
>
	<div class="bg-green-500 text-white p-2 rounded">A</div>
	<div class="bg-green-500 text-white p-6 rounded">B</div>
	<div class="bg-green-500 text-white p-10 rounded">C</div>
</div>

Preview

Useful for:

• Centering logos in a navbar.

• Centering profile pictures inside cards.

items-baseline

Aligns flex items along their text baselines.

<div
	class="flex items-baseline space-x-4 h-40 border border-yellow-100 rounded-t-xl p-4"
>
	<div class="bg-yellow-500 text-white text-sm p-2 rounded">Small</div>
	<div class="bg-yellow-500 text-white text-xl p-2 rounded">XL</div>
	<div class="bg-yellow-500 text-white text-3xl p-2 rounded">3XL</div>
</div>

Preview

Useful for:

• Aligning headings and paragraphs neatly.

• Aligning icons next to text precisely.

items-stretch

Default behavior — stretches flex items to fill the height of the container if no height is set.

<div
	class="flex items-stretch space-x-4 h-40 border border-blue-100 rounded-t-xl p-4"
>
	<div class="bg-blue-500 text-center text-white p-2 w-16 rounded">A</div>
	<div class="bg-blue-500 text-center text-white p-6 w-16 rounded">B</div>
	<div class="bg-blue-500 text-center text-white p-10 w-16 rounded">C</div>
</div>

Preview

Useful for:

• Making column grids look consistent.

• Stretching cards evenly even with different content lengths.

Responsive Tailwind Align Items

Tailwind CSS allows you to apply align items classes responsively at different breakpoints. To use responsive tailwind align items classes, you can append the breakpoint prefix to the utility class. For example, md:items-center applies the center alignment starting from the medium breakpoint and above.

<div class="flex items-start md:items-stretch h-40">
	<!-- Flex items here -->
</div>

Preview

In the above example, the flex items are aligned to the start of the cross-axis by default (items-start), but starting from the medium breakpoint and above, the alignment is changed to stretch (items-stretch).

Interaction State Use (hover/focus)

There’s no direct interaction-based version of align-items, but you can combine with hover states on containers:

<div class="flex hover:items-end items-start transition-all duration-300">
	<!-- Children -->
</div>

Preview

This shifts alignment on hover for interactive layout changes.

Arbitrary Value Usage

Tailwind supports arbitrary values via square brackets:

<div class="flex [align-items:baseline]">
	<!-- ... -->
</div>

Preview

Note: use with caution—stick to standard utilities unless you have a good reason.

Customization in tailwind.config.js

You typically don’t need to customize alignItems, but you can extend it like this:

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			alignItems: {
				evenly: "space-evenly",
				custom: "10px", // not standard, but useful for experiments
			},
		},
	},
};

Then use it like:

<div class="flex items-evenly">
	<!-- ... -->
</div>

Real UI Component Example: Chat Bubble Alignment

<div class="flex flex-col space-y-2">
	<!-- Sender -->
	<div class="flex items-start">
		<div class="bg-gray-200 rounded-lg p-3 max-w-xs">Hey, how are you?</div>
	</div>

	<!-- Receiver -->
	<div class="flex items-end justify-end">
		<div class="bg-blue-500 text-white rounded-lg p-3 max-w-xs">
			I'm good, you?
		</div>
	</div>
</div>

Preview

✅ items-start and items-end control how each bubble aligns vertically inside each message block.

Best Practices for Devs & Designers

• Use items-center in navbars, sidebars, and cards to vertically center content.

• Combine with justify-\* utilities to control both axes.

• Avoid arbitrary values unless necessary — stick with standard items-* utilities for consistency.

• Use responsive utilities (md:items-center) for adapting layout at different breakpoints.

• Don’t confuse items-* (cross axis) with justify-* (main axis).

Pro Tips for Using Tailwind Align Items

• Always combine flex with items-{alignment}. Otherwise, it won't work.

• Use responsive prefixes (sm:, md:, lg:) to adapt your alignment to different devices.

• Combine with justify-{alignment} classes to control horizontal alignment too!

• If your items look weird, check their individual heights — flex alignment works relative to the sizes of your flex children.

• Play with gap-{size} utilities to add spacing between items without messing up their alignment.

Common Mistakes Beginners Make

• Forgetting the flex container: You must add flex to the parent element.

• Mixing up flex-direction: Remember, if you use flex-col, the cross-axis becomes horizontal!

• Overusing center alignment: While centering is useful, aligning content meaningfully can sometimes offer better design structure.

Tailwind Align Items List (Quick Reference)

Here's a handy Tailwind align items list with all the available options:

You'll find yourself using items-center and items-start most often, but knowing all of them gives you great control over your layouts!

Windframe Tailwind blocks

header