Tailwind Align Self

The CSS property align-self lets an individual flex or grid item override its container’s align-items value. Tailwind provides several utility classes for align-self, making it easy to tweak the alignment of one item in your HTML.

How to Apply Tailwind Align Items

To apply the alignment to a specific flex item, you can use the tailwind self-{alignment} utility class, where {alignment} represents the desired alignment.

For example, if your flex container has items-center (which vertically centers all items in a row layout), you can use self-start on one child to push that child to the top instead. Here’s a quick

<div class="flex items-center h-32 bg-indigo-50">
	<div class="self-start bg-blue-500 px-4 py-2">I'm at the top</div>
	<div class="bg-indigo-500 px-4 py-2">I'm centered</div>
	<div class="bg-indigo-500 px-4 py-2">I'm centered</div>
</div>

Preview

In this example, the container has items-center (so by default all children are centered vertically). But the first item has self-start, which overrides that and aligns it to the start of the cross axis (top of the container). The other items remain centered.

Tailwind Align-Self Classes (Quick Reference)

Below is a quick reference table for all Tailwind align-self utility classes. Each class corresponds to a CSS align-self property value:

Understanding the Cross-Axis

Remember: align-items and align-self control alignment on the cross axis of the flex container. A quick way to see this:

If you use flex-row (default), the cross axis is vertical. So self-start means top, self-end means bottom. If you use flex-col, the cross axis is horizontal. Then self-start means left, self-end means right. For example, in a column layout:

<div class="flex flex-col items-start h-32 bg-indigo-50">
	<div class="self-end bg-indigo-500 px-4 py-2">I'm on the right</div>
	<div class="bg-indigo-500 px-4 py-2">I'm left-aligned</div>
</div>

Preview

Here, items-start (on a column) aligns items at the left by default. But the blue box has self-end, so it moves to the right (the end of the horizontal cross axis). Key point: The main axis depends on flex-direction, and align-self moves the item along the opposite (cross) axis. This is why align-self is so useful for fine-tuning individual item placement.

Using Tailwind Align-Self in Real-World Layouts

Let’s look at some common scenarios where align-self comes in handy.

Example: Flexible Navigation Bar

Imagine a navigation bar with a logo on the left, some links in the middle, and a login button on the right. You want the login button to sit a bit lower than the other items for style. You can do this with self-end:

<nav class="flex items-center p-4 bg-gray-800 text-white">
	<div class="mr-auto">Logo</div>
	<ul class="flex space-x-4">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	<button class="ml-auto self-end bg-blue-500 px-4 py-2 rounded">Login</button>
</nav>

Preview

In this code:

• The <nav> container has flex items-center, so all items are centered vertically by default. The logo (and menu links) stay centered.
• The <button> has self-end, so it moves to the bottom of the navbar. This gives a subtle staggered effect.
• This kind of touch can make a layout feel more dynamic. You might see the login button or a call-to-action drop slightly lower than the rest of the row, drawing visual interest.

Responsive Design with Align-Self

Tailwind’s responsive prefixes (like sm:, md:, lg:) let you change alignment based on screen size. For example:

<div class="flex flex-col md:flex-row items-start md:items-center p-4">
	<div class="md:self-end">
		<img src="https://via.placeholder.com/150" alt="Product Image" />
	</div>
	<div class="mt-4 md:mt-0 md:ml-4">
		<h3 class="text-2xl font-semibold">Product Name</h3>
		<p class="mt-2 text-gray-700">
			Brief description of the product with key features.
		</p>
	</div>
</div>

Preview

Product Name

Brief description of the product with key features.

Product Name

Brief description of the product with key features.

Explanation:

• On small screens, this is a vertical (flex-col) layout with items-start: both the image and text are left-aligned.
• On medium screens (md:), it switches to a horizontal row (md:flex-row) with items-center: all items (image and text) are vertically centered.
• The image container has md:self-end: on medium+ screens, the image moves to the bottom of the row. On small screens, self-end has no effect (since the layout is columnar, cross axis is horizontal and we didn’t set it).

So the behavior is:

Small screens: Image above text, both left-aligned. Medium+ screens: Image and text side by side; text is centered vertically with the container, but the image is aligned to the bottom (because of self-end).

Responsive align-self lets you fine-tune layouts for different breakpoints. For example, you might want an item centered on mobile but pushed to an edge on desktop.

Best Practices and Tips

• Prefer container alignment first: Start by setting items-center, items-start, etc. on the container. Use self-... sparingly, only for exceptions. This keeps your layout consistent.

• Be mindful of the cross-axis: Remember which axis is cross-axis. Use align-self when you want to move an element perpendicular to the main flow.

• Responsive design: Don’t forget Tailwind’s responsive prefixes (like md:self-center). You can easily change an item’s alignment at different screen sizes.

• Use self-auto to reset: If you want an item to ignore previous self- classes and go back to the container’s alignment, use self-auto.

• Baseline alignment: self-baseline and self-baseline-last are useful when aligning text elements. They align by the text baseline rather than box edges.

• Safe-area variants: If you’re designing for devices with notches or special insets, use self-end-safe or self-center-safe to ensure elements aren’t cut off.

Windframe Tailwind blocks

landing page