Browser Support
Flex Direction
Flex Wrap
Flex
Flex Basis
Menu

Tailwind CSS Align Self

Align Self in CSS is a property that allows individual elements within a flex or grid container to override the alignment set by the container's align-items property. This is particularly useful when you want some but not all flex/grid items to align differently. Tailwind CSS provides a powerful yet intuitive way to utilize align-self with a range of utility classes, making alignment not only simple but also highly adaptable.

In this guide, we'll explore the various utility classes provided by Tailwind CSS for align-self. Whether you’re new to Tailwind CSS or an experienced developer, this guide offers valuable insights into leveraging Align Self effectively.

ClassPropertiesExample
self-autoalign-self: auto;<div className="self-auto"></div>
self-startalign-self: flex-start;<div className="self-start"></div>
self-endalign-self: flex-end;<div className="self-end"></div>
self-centeralign-self: center;<div className="self-center"></div>
self-stretchalign-self: stretch;<div className="self-stretch"></div>
self-baselinealign-self: baseline;<div className="self-baseline"></div>

Overview of Align Self

Self Auto

To apply the align-self: auto to your flex item, use self-auto.

This is a live editor. Play around with it!
export default function AlignSelfDemo() {
  return (
    <div className="flex gap-4 justify-between h-screen w-screen">
      <div className="self-auto h-16 w-16 bg-blue-500"></div>
      <div className="self-auto h-16 w-16 bg-green-500"></div>
      <div className="self-auto h-16 w-16 bg-red-500"></div>
    </div>
  );
}

Self Start

To apply the align-self: start to your flex item, use self-start.

This is a live editor. Play around with it!
export default function SelfStart() {
  return (
    <div className="flex gap-4 justify-between h-screen w-screen">
      <div className="self-start h-16 w-16 bg-blue-500"></div>
      <div className="self-start h-16 w-16 bg-green-500"></div>
      <div className="self-start h-16 w-16 bg-red-500"></div>
    </div>
  );
}

Self Center

To apply the align-self: center to your flex item, use self-center.

This is a live editor. Play around with it!
export default function SelfCenter() {
  return (
    <div className="flex gap-4 justify-between h-screen w-screen">
      <div className="self-center h-16 w-16 bg-blue-500"></div>
      <div className="self-center h-16 w-16 bg-green-500"></div>
      <div className="self-center h-16 w-16 bg-red-500"></div>
    </div>
  );
}

Self End

To apply the align-self: end to your flex item, use self-end.

This is a live editor. Play around with it!
export default function SelfEnd() {
  return (
    <div className="flex gap-4 justify-between h-screen w-screen">
      <div className="self-end h-16 w-16 bg-blue-500"></div>
      <div className="self-end h-16 w-16 bg-green-500"></div>
      <div className="self-end h-16 w-16 bg-red-500"></div>
    </div>
  );
}

Self Stretch

To apply the align-self: stretch to your flex item, use self-stretch.

This is a live editor. Play around with it!
export default function SelfStretch() {
  return (
    <div className="flex gap-4 justify-between h-screen w-screen">
      <div className="self-stretch w-16 bg-blue-500"></div>
      <div className="self-stretch w-16 bg-green-500"></div>
      <div className="self-stretch w-16 bg-red-500"></div>
    </div>
  );
}

States and Responsiveness

Hover and Focus States

Tailwind supports pseudo-classes like hover: and focus: for conditional styling. For example, you can conditionally adjust the alignment of an element based on user interaction.

This is a live editor. Play around with it!
export default function HoverFocusAlignment() {
  return (
    <div className="w-screen h-screen">
      <p className="text-center py-10">Click on a box to change its alignment</p>
      <div className="flex justify-between gap-4 h-[296px]">
        <div tabindex="0" className="focus:self-end h-16 w-16 bg-blue-500"></div>
        <div tabindex="1" className="focus:self-end h-16 w-16 bg-green-500"></div>
        <div tabindex="2" className="focus:self-end h-16 w-16 bg-red-500"></div>
      </div>
    </div>
  );
}

Breakpoint Modifiers

Tailwind’s responsive design utilities allow you to apply alignment based on screen sizes. Here’s how you can make an item start on smaller screens and center on larger screens:

This is a live editor. Play around with it!
export default function ResponsiveAlignment() {
  return (
    <div className="flex gap-4 justify-between h-screen w-screen">
      <div className="sm:self-start lg:self-center h-16 w-16 bg-blue-500 flex justify-center items-center"></div>
      <div className="sm:self-start lg:self-center h-16 w-16 bg-green-500"></div>
      <div className="sm:self-start lg:self-center h-16 w-16 bg-red-500"></div>
    </div>
  );
}

Real World Examples

Event Timeline

A vertical timeline of company milestones with alternating alignment.

This is a live editor. Play around with it!
export default function Timeline() {
  const milestones = [
    {
      id: 1,
      year: "2018",
      title: "Company Founded",
      description: "Started with a vision to transform industry",
      src: "https://images.unsplash.com/photo-1507537297725-24a1c029d3ca",
      alt: "Company founding moment"
    },
    {
      id: 2,
      year: "2019",
      title: "First Patent",
      description: "Secured key technology patent",
      src: "https://images.unsplash.com/photo-1589829085413-56de8ae18c73",
      alt: "Patent document"
    },
    {
      id: 3,
      year: "2020",
      title: "Team Growth",
      description: "Expanded to 100+ employees",
      src: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
      alt: "Team collaboration"
    },
    {
      id: 4,
      year: "2021",
      title: "Product Launch",
      description: "Released our flagship AI platform",
      src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      alt: "Product launch event"
    },
    {
      id: 5,
      year: "2022",
      title: "Series C Funding",
      description: "Raised $50M to accelerate growth",
      src: "https://images.unsplash.com/photo-1579532537598-459ecdaf39cc",
      alt: "Business growth chart"
    },
    {
      id: 6,
      year: "2023",
      title: "Global Expansion",
      description: "Opened offices in Singapore and London",
      src: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab",
      alt: "Modern office building"
    },
  ];

  return (
    <div className="max-w-4xl mx-auto p-8">
      <div className="relative">
        <div className="absolute left-1/2 h-full w-0.5 bg-gray-200"></div>
        {milestones.map((milestone, index) => (
          <div
            key={milestone.year}
            className={`relative flex items-center mb-12 ${
              index % 2 === 0 ? 'self-start' : 'self-end flex-row-reverse'
            }`}
          >
            <div className="w-5/12">
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img
                  src={milestone.src}
                  alt={milestone.alt}
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="font-bold text-xl mb-2">{milestone.title}</h3>
                  <p className="text-gray-600">{milestone.description}</p>
                </div>
              </div>
            </div>
            <div className="w-2/12 flex justify-center">
              <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                <span className="text-white font-bold">{milestone.id}</span>
              </div>
            </div>
            <div className="w-5/12"></div>
          </div>
        ))}
      </div>
    </div>
  );
}

Featured Products Grid

A responsive product grid that uses self-stretch for featured items and self-start for regular products.

This is a live editor. Play around with it!
import React from 'react';

// Featured Products Grid
const ProductHighlight = () => {
  const products = [
    {
      id: 1,
      name: "Premium Leather Backpack",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1622560480605-d83c853bc5c3",
      alt: "Brown leather backpack",
      featured: true
    },
    {
      id: 2,
      name: "Minimalist Watch",
      price: "$89.99",
      src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      alt: "Simple analog watch",
      featured: false
    },
    {
      id: 3,
      name: "Wireless Earbuds",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1590658268037-6bf12165a8df",
      alt: "White wireless earbuds",
      featured: false
    },
    {
      id: 4,
      name: "Smart Water Bottle",
      price: "$45.99",
      src: "https://images.unsplash.com/photo-1602143407151-7111542de6e8",
      alt: "Smart water bottle",
      featured: true
    },
    {
      id: 5,
      name: "Sustainable Sunglasses",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1572635196237-14b3f281503f",
      alt: "Eco-friendly sunglasses",
      featured: false
    },
    {
      id: 6,
      name: "Travel Passport Holder",
      price: "$34.99",
      src: "https://images.unsplash.com/photo-1553531580-a000ac8df244",
      alt: "Leather passport holder",
      featured: false
    }
  ];

  return (
    <div className="grid grid-cols-2 gap-4 p-4 bg-gray-100">
      {products.map(product => (
        <div 
          key={product.id}
          className={`bg-white rounded-lg p-4 flex flex-col ${
            product.featured ? 'self-stretch col-span-2 row-span-2' : 'self-start'
          }`}
        >
          <img 
            src={product.src} 
            alt={product.alt}
            className="w-full h-48 object-cover rounded-md"
          />
          <h3 className="mt-2 font-bold">{product.name}</h3>
          <p className="text-gray-600">{product.price}</p>
        </div>
      ))}
    </div>
  );
};

export default ProductHighlight

Feature Timeline

A vertical timeline showing product features with alternating alignments.

This is a live editor. Play around with it!
export default function FeatureTimeline() {
  const features = [
    {
      title: "Launch",
      date: "Jan 2024",
      description: "Initial platform release",
      icon: "https://images.unsplash.com/photo-1518364538800-6bae3c2ea0f2",
      alt: "Rocket launch icon"
    },
    {
      title: "Mobile App",
      date: "Mar 2024",
      description: "iOS and Android apps",
      icon: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c",
      alt: "Mobile phone icon"
    },
    {
      title: "API Integration",
      date: "May 2024",
      description: "Third-party API support",
      icon: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31",
      alt: "API icon"
    },
    {
      title: "Analytics App",
      date: "Jul 2024",
      description: "Advanced dashboard",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      alt: "Analytics dashboard icon"
    },
    {
      title: "AI Features",
      date: "Sep 2024",
      description: "Machine learning integration",
      icon: "https://images.unsplash.com/photo-1677442136019-21780ecad995",
      alt: "AI brain icon"
    },
    {
      title: "Global Launch",
      date: "Dec 2024",
      description: "Worldwide availability",
      icon: "https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1",
      alt: "Global network icon"
    }
  ];

  return (
    <div className="flex flex-col space-y-8 p-6">
      {features.map((feature, index) => (
        <div 
          key={feature.title} 
          className={`flex items-center ${
            index % 2 === 0 ? 'self-start' : 'self-end'
          }`}
        >
          <img 
            src={feature.icon} 
            alt={feature.alt} 
            className="w-12 h-12 rounded-full"
          />
          <div className="ml-4">
            <h3 className="font-bold">{feature.title}</h3>
            <p className="text-gray-600">{feature.date}</p>
            <p className="text-sm">{feature.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Testimonial Wall

A customer testimonial wall displayed in a chat-like interface with alternating self-alignment to create a conversational flow.

This is a live editor. Play around with it!
export default function TestimonialChat() {
  const testimonials = [
    {
      name: "Alex Morgan",
      comment: "The customer service here is absolutely outstanding! They went above and beyond to help me.",
      role: "Small Business Owner",
      align: "self-start",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Alex Morgan photo"
    },
    {
      name: "Ryan Chen",
      comment: "Best decision we made for our business. The platform is intuitive and powerful.",
      role: "Marketing Director",
      align: "self-end",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "Ryan Chen photo"
    },
    {
      name: "Lisa Peterson",
      comment: "I've tried many similar services, but this one stands out in terms of features and reliability.",
      role: "Freelancer",
      align: "self-start",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Lisa Peterson photo"
    },
    {
      name: "Michael Torres",
      comment: "The analytics features have transformed how we make decisions. Highly recommended!",
      role: "Data Analyst",
      align: "self-end",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "Michael Torres photo"
    },
    {
      name: "Sarah Williams",
      comment: "Excellent value for money. The support team is always ready to help.",
      role: "Tech Entrepreneur",
      align: "self-start",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Williams photo"
    },
    {
      name: "David Park",
      comment: "The integration capabilities are amazing. It works seamlessly with our existing tools.",
      role: "CTO",
      align: "self-end",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "David Park photo"
    }
  ];

  return (
    <div className="flex flex-col gap-4 w-full max-w-md mx-auto p-4 bg-gray-50">
      {testimonials.map((testimonial, index) => (
        <div 
          key={index} 
          className={`${testimonial.align} flex gap-3 max-w-xs ${
            testimonial.align === 'self-end' ? 'flex-row-reverse' : ''
          }`}
        >
          <img 
            src={testimonial.src} 
            alt={testimonial.alt}
            className="w-12 h-12 rounded-full object-cover"
          />
          <div className={`bg-white p-4 rounded-lg shadow-sm ${
            testimonial.align === 'self-end' ? 'rounded-tr-none' : 'rounded-tl-none'
          }`}>
            <p className="text-sm mb-2">{testimonial.comment}</p>
            <p className="text-xs font-bold">{testimonial.name}</p>
            <p className="text-xs text-gray-500">{testimonial.role}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Vertical Social Card Stack

A social media-style card layout where featured cards stand out by aligning themselves differently.

This is a live editor. Play around with it!
export default function SocialCardStack() {
  const posts = [
    {
      id: 1,
      author: "Jane Cooper",
      content: "Just launched my new photography portfolio!",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      featured: true,
      likes: 234,
      comments: 45
    },
    {
      id: 2,
      author: "Alex Morgan",
      content: "Exploring the streets of Tokyo at night",
      image: "https://images.unsplash.com/photo-1503899036084-c55cdd92da26",
      featured: true,
      likes: 189,
      comments: 23
    },
    {
      id: 3,
      author: "Sam Wilson",
      content: "New hiking trail discovered!",
      image: "https://images.unsplash.com/photo-1501555088652-021faa106b9b",
      featured: false,
      likes: 432,
      comments: 67
    },
    {
      id: 4,
      author: "Maria Garcia",
      content: "Coffee and code - perfect morning",
      image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
      featured: false,
      likes: 156,
      comments: 12
    },
    {
      id: 5,
      author: "John Smith",
      content: "Weekend vibes at the beach",
      image: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e",
      featured: false,
      likes: 876,
      comments: 89
    },
    {
      id: 6,
      author: "Lisa Johnson",
      content: "Art gallery opening night",
      image: "https://images.unsplash.com/photo-1501386761578-eac5c94b800a",
      featured: false,
      likes: 345,
      comments: 56
    }
  ];

  return (
    <div className="flex flex-col gap-4 w-full max-w-sm mx-auto p-4">
      {posts.map(post => (
        <div
          key={post.id}
          className={`bg-white rounded-xl shadow-md overflow-hidden ${
            post.featured ? 'self-start' : 'self-end'
          }`}
        >
          <img 
            src={post.image} 
            alt={`${post.author}'s post`}
            className="w-full h-48 object-cover"
          />
          <div className="p-4">
            <h3 className="font-bold text-lg">{post.author}</h3>
            <p className="text-gray-600 mt-2">{post.content}</p>
            <div className="flex gap-4 mt-4 text-gray-500">
              <span>❤️ {post.likes}</span>
              <span>💬 {post.comments}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Best Practices

Maintain Design Consistency

Achieving a consistent design scheme across your project is critical when using the align-self utilities in Tailwind CSS. To maintain uniformity, ensure that alignment decisions complement the container's align-items property. For example, if a flex container has a items-center property, limiting the application of align-self overrides to individual elements helps maintain visual consistency. Overusing different alignments inside the same container can lead to chaotic and unintuitive layouts, so it's important to apply these utilities sparingly and with intent.

Additionally, using a consistent naming convention for reusable classes or components that include self-* utilities allows for better maintainability. For instance, create wrapper components that define alignment behavior specific to a section, ensuring these alignments follow an established design language throughout your application. This methodological approach aligns with scaling considerations needed for large, collaborative projects.

Build Responsive Design

Responsive design is a cornerstone of modern web development, and align-self utilities pair seamlessly with Tailwind's responsive modifiers to adapt seamlessly to device-specific constraints. Applying sm:self-*, md:self-*, lg:self-*, or xl:self-* ensures that alignment behaviors dynamically change to suit various viewport sizes.

This approach allows developers to create flexible layouts where elements can shift positions based on the screen size. For example, a call-to-action button can be left-aligned on mobile screens using self-start for a compact look while shifting to center alignment with lg:self-center on larger screens for better visual balance. By leveraging responsive modifiers, you ensure that your designs remain both visually appealing and functional across multiple devices, enhancing the user experience.

Accessibility Considerations

Enhance Readability and Navigability

Readability is an essential accessibility concern for all users, particularly for those with cognitive challenges or visual impairments. The strategic application of align-self utilities can guide users’ eyes through intuitive layout hierarchies, making text-heavy UIs or data-dense dashboards far easier to interpret.

For example, align feature headlines with self-center to make them visually prominent or use self-end for supplemental information like captions that users can refer to as secondary content. Maintain logical alignment flows between elements across the interface, ensuring that navigational sections such as headers and breadcrumbs are predictably placed.

Ensure Keyboard Accessibility

Keyboard navigation is essential for mobility-impaired users and keyboard enthusiasts. Use alignment properties like align-self to create logical tab orders and visually highlight active focus states concisely.

self-start or self-end can be powerful indicators for focused elements in vertically scrollable containers, helping anchor the user’s attention effectively.

Align ItemsGap

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy