Tailwind CSS - Align Self

Tailwind CSS: Align Self

The align-self utility in Tailwind CSS provides fine-grained control over the alignment of individual items within a Flexbox or Grid container. It allows you to override the container’s align-items property for a specific element, positioning it independently along the container’s cross-axis.

Modern Development Setup

While the examples in this tutorial use the Tailwind Play CDN for quick demonstrations, real-world projects should be set up using a package manager like npm or yarn and the Tailwind CSS CLI. This enables the full power of Tailwind, including customization, plugins, and performance optimization with PurgeCSS.

# 1. Install Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init

# 2. Configure your template paths in tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

# 3. Add Tailwind directives to your main CSS file
@tailwind base;
@tailwind components;
@tailwind utilities;

# 4. Start the build process
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Align Self Class Reference

Here are the core utility classes for controlling the cross-axis alignment of individual flex or grid items.

Class	CSS Property
self-auto	align-self: auto;
self-start	align-self: flex-start;
self-end	align-self: flex-end;
self-center	align-self: center;
self-stretch	align-self: stretch;
self-baseline	align-self: baseline;

Core Concepts

• self-auto: The item respects the align-items value of its parent container. This is the default behavior.
• self-start: Aligns the item to the start of the cross-axis, ignoring the parent’s align-items value.
• self-end: Aligns the item to the end of the cross-axis.
• self-center: Centers the item along the cross-axis.
• self-stretch: Stretches the item to fill the container’s height (in a row-based flex container) or width (in a column-based flex container). This requires the item to not have a fixed size on the cross-axis.
• self-baseline: Aligns the item based on the baseline of its text content.

Practical Application: Building a Layout Component

Let’s see these utilities in action. The example below shows a flexible container where most items are stretched, but one is specifically aligned to the center and another to the end. Notice how we also apply a responsive class (md:self-start) to change alignment on medium-sized screens and up.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Align Self Example</title>
</head>
<body class="bg-slate-100 p-8">
    <h2 class="text-2xl font-bold text-slate-800 mb-4">User Profile Cards</h2>
    <div class="flex h-72 items-stretch gap-4 p-4 bg-white rounded-lg shadow-lg">

        <div class="flex-1 bg-sky-500 text-white p-4 rounded-md flex items-center justify-center">
            <span>Default (Stretch)</span>
        </div>

        <div class="flex-1 bg-violet-500 text-white p-4 rounded-md flex items-center justify-center self-center md:self-start">
            <span>I'm centered (or top-aligned on medium screens)</span>
        </div>

        <div class="flex-1 bg-sky-500 text-white p-4 rounded-md flex items-center justify-center">
            <span>Default (Stretch)</span>
        </div>

        <div class="flex-1 bg-fuchsia-500 text-white p-4 rounded-md flex items-center justify-center self-end">
            <span>I'm at the end</span>
        </div>

    </div>
</body>
</html>

Common Mistakes & Debugging

• self-stretch isn’t working? Check if the item has a fixed height (like h-24) or width. self-stretch can only work if the item’s size on the cross-axis is not constrained.
• Flex Direction Matters: The cross-axis depends on the flex-direction. In a standard flex-row, the cross-axis is vertical. In a flex-col, the cross-axis is horizontal. The alignment utilities will behave accordingly.
• Overusing align-self: If you find yourself applying align-self to almost every item in a container, consider restructuring your HTML or using multiple flex/grid containers to achieve the desired layout. It’s often cleaner to manage alignment at the parent level with align-items.

Further Learning

To fully master align-self, ensure you have a strong understanding of the core CSS Flexbox and Grid models. You can find excellent resources on MDN Web Docs for both Flexbox and Grid.