Tailwind CSS - Align Items

Modern Guide to Tailwind CSS: Align Items

The align-items utilities in Tailwind CSS control how items are positioned along the cross axis of a flex or grid container. This is fundamental for creating vertically aligned layouts.

Setting Up Your Modern Development Environment

While you can use the Tailwind Play CDN for quick demos, a professional setup offers more power and performance. Here’s the standard workflow:

# 1. Install Tailwind CSS via npm
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

Pro-Tip: Integrating Tailwind into a framework like Next.js, Vite, or Laravel is even easier. Check the official Tailwind CSS installation guides for framework-specific instructions.

Core Align Items Utilities

These classes apply to a flex or grid container (e.g., an element with the flex or grid class).

Class	CSS Property	Use Case
items-start	align-items: flex-start;	Aligns items to the top of the container.
items-end	align-items: flex-end;	Aligns items to the bottom of the container.
items-center	align-items: center;	Aligns items to the vertical center of the container. Very common.
items-baseline	align-items: baseline;	Aligns items based on their text’s baseline. Useful for aligning text of different sizes.
items-stretch	align-items: stretch;	Stretches items to fill the container’s height (default behavior).

Practical Examples

Let’s see these utilities in action with some real-world components.

Example 1: Vertically Centering Content in a Card

The items-center class is perfect for aligning an icon and text within a feature list. We also use responsive prefixes (md:) to change the layout on different screen sizes.

<!-- Assumes you have a modern setup or are using the Play CDN -->
<div class="font-sans p-8 bg-slate-50">
  <h3 class="text-2xl font-bold mb-4 text-slate-800">Plan Features</h3>
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
    <div class="p-8">
      <ul class="space-y-4">
        <!-- Using flex and items-center for vertical alignment -->
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><!-- Checkmark Icon --><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
          <span class="text-slate-700">Unlimited Projects</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
          <span class="text-slate-700">Team Collaboration</span>
        </li>
         <!-- Using items-start for a different alignment style -->
        <li class="flex items-start">
          <svg class="h-6 w-6 text-green-500 mr-3 mt-1 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
          <span class="text-slate-700">24/7 Support with multi-line description to demonstrate top alignment.</span>
        </li>
      </ul>
    </div>
  </div>
</div>

Example 2: Creating Equal-Height Grid Columns

By default, grid items stretch to fill the row’s height (items-stretch). If we change this to items-start, each card will only be as tall as its content.

<div class="font-sans p-8 bg-slate-50">
  <h3 class="text-2xl font-bold mb-1 text-slate-800">Our Services</h3>
  <p class="text-slate-600 mb-6">Using `items-start` to align cards to the top.</p>

  <!-- The 'h-auto' on the container is important for demonstration -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
    <!-- Card 1 -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h4 class="text-xl font-semibold text-sky-600 mb-2">Web Development</h4>
      <p class="text-slate-700">Creating responsive and fast websites.</p>
    </div>
    <!-- Card 2 (with more content) -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h4 class="text-xl font-semibold text-sky-600 mb-2">Mobile Apps</h4>
      <p class="text-slate-700">Building native and cross-platform mobile applications that users love to use and engage with daily.</p>
    </div>
    <!-- Card 3 -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h4 class="text-xl font-semibold text-sky-600 mb-2">UI/UX Design</h4>
      <p class="text-slate-700">Designing intuitive user interfaces.</p>
    </div>
  </div>
</div>

Common Errors and Debugging Tips

• items-stretch has no effect: This usually happens when the flex/grid items have a fixed height (e.g., h-24). For items-stretch to work, items must have a height of auto (the default).
• items-center not working: Make sure the parent container has a defined height or has content that gives it height. You can’t vertically center items inside a container that has zero height. For testing, add a background color (bg-red-200) and a height class (h-64) to the parent to visualize its bounds.
• items-baseline looks like items-start: This can happen if all the text in the child elements has the same font size and line height. The effect of items-baseline is most noticeable when aligning text of different sizes.

Further Learning

You’ve mastered cross-axis alignment! To gain full control over your layouts, you should learn about main-axis alignment next. Check out our guide on Justify Content.