Browser Support

Menu

Tailwind CSS Align Content

Align Content is a CSS property specifically used in the flexbox and grid layout modules. It allows developers to control the alignment of multiple rows of items within a container. Simply put, it determines how the space between and around these rows is utilized.

Tailwind's utility classes helps you implement the align-content property with ease. These utilities provide developers with the tools needed to create consistent designs, responsive alignments, and conditional effects for multiple devices and interactions.

Class	Properties	Example
`content-normal`	`align-content: normal;`	`<div className="content-normal"></div>`
`content-center`	`align-content: center;`	`<div className="content-center"></div>`
`content-start`	`align-content: flex-start;`	`<div className="content-start"></div>`
`content-end`	`align-content: flex-end;`	`<div className="content-end"></div>`
`content-between`	`align-content: space-between;`	`<div className="content-between"></div>`
`content-around`	`align-content: space-around;`	`<div className="content-around"></div>`
`content-evenly`	`align-content: space-evenly;`	`<div className="content-evenly"></div>`
`content-baseline`	`align-content: baseline;`	`<div className="content-baseline"></div>`
`content-stretch`	`align-content: stretch;`	`<div className="content-stretch"></div>`

Overview of Align Content

Align Content to Start

The start configuration aligns the rows of a container to the start of its cross-axis, ensuring that all content is positioned at the top side of the flex or grid parent.

This is a live editor. Play around with it!

{/* Using Tailwind CSS 'content-start' utility */}
  export default function StartAlignment() {
  return (
    <div className="h-screen w-screen flex flex-wrap content-start bg-gray-100">
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Office Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
            <img
        src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"
        alt="Headphone Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Align Content to Center

The center configuration aligns the rows along the middle of the cross-axis.

This is a live editor. Play around with it!

{/* Using Tailwind CSS 'content-center' utility */}
  export default function StartAlignment() {
  return (
    <div className="h-screen w-screen flex flex-wrap content-center bg-gray-100">
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Office Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
            <img
        src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"
        alt="Headphone Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Align Content to End

By applying the end alignment, rows are distributed towards the bottom of the container's cross-axis.

This is a live editor. Play around with it!

{/* Using Tailwind CSS 'content-end' utility */}
  export default function StartAlignment() {
  return (
    <div className="h-screen w-screen flex flex-wrap content-end bg-gray-100">
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Office Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
            <img
        src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"
        alt="Headphone Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Distribute Space with Space Between

With space-between, rows are evenly spaced such that the first row aligns to the start and the last to the end.

This is a live editor. Play around with it!

{/* Using Tailwind CSS 'content-between' utility */}
  export default function StartAlignment() {
  return (
    <div className="h-screen w-screen flex flex-wrap content-between bg-gray-100">
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Office Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
            <img
        src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"
        alt="Headphone Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Distribute Space with Space Around

The space-around utility ensures rows are equally spaced with padding distributed both before and after content.

This is a live editor. Play around with it!

{/* Using Tailwind CSS 'content-around' utility */}
  export default function StartAlignment() {
  return (
    <div className="h-screen w-screen flex flex-wrap content-around bg-gray-100">
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Office Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
            <img
        src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"
        alt="Headphone Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Distribute Space with Space Evenly

By applying space-evenly, rows achieve evenly distributed spacing with consistent padding between rows and the container.

This is a live editor. Play around with it!

{/* Using Tailwind CSS 'content-evenly' utility */}
  export default function StartAlignment() {
  return (
    <div className="h-screen w-screen flex flex-wrap content-evenly bg-gray-100">
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Office Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
            <img
        src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"
        alt="Headphone Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      {/* Using Tailwind CSS 'content-start' utility */}
    </div>
  );
}

Distribute Space with Stretch

If you prefer rows to occupy their maximum space, use the stretch alignment.

This is a live editor. Play around with it!

{/* Using Tailwind CSS 'content-stretch' utility */}
  export default function StartAlignment() {
  return (
    <div className="h-screen w-screen flex flex-col content-stretch bg-gray-100">
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Office Image"
        className="m-2 h-24 object-cover border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 h-24 object-cover border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 h-24 object-cover border-2 border-black"
      />
        <img
        src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 h-24 object-cove border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 h-24 object-cover border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"
        alt="Headphone Image"
        className="m-2 h-24 object-cover border-2 border-black"
      />
    </div>
  );
}

Normal Content Alignment

To reset alignment to its default browser-determined value, use normal.

This is a live editor. Play around with it!

{/* Using Tailwind CSS 'content-normal' utility */}
  export default function StartAlignment() {
  return (
    <div className="h-screen w-screen flex flex-wrap content-normal bg-gray-100">
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Office Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
            <img
        src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"
        alt="Headphone Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

States and Responsiveness

Hover and Focus States

You can also add conditional states such as hover or focus-visible to align-content for building interactive designs.

This is a live editor. Play around with it!

export default function ConditionalHoverAlignment() {
  return (
    <div className="h-screen w-screen flex flex-wrap content-start hover:content-around bg-purple-50">
       <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Office Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
        <img
        src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"
        alt="Headphone Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Breakpoint Modifers

Tailwind also allows you to apply align-content utilities conditionally based on breakpoint sizes. This feature is helpful in building responsive layouts.

This is a live editor. Play around with it!

export default function ResponsiveAlignment() {
  return (
    <div className="h-screen w-screen content-start flex flex-wrap md:content-evenly lg:content-center bg-orange-50">
      <img
        src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3"
        alt="Office Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
        <img
        src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"
        alt="Headphone Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Real World Examples

Product Grid with Category Labels

A responsive product grid that displays items with category labels, using content-around for even spacing.

This is a live editor. Play around with it!

export default function ProductCategoryGrid() {
  const products = [
    {
      id: 1,
      name: "Leather Backpack",
      category: "Accessories",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1473188588951-666fce8e7c68",
      alt: "Brown leather backpack"
    },
    {
      id: 2,
      name: "Wireless Headphones",
      category: "Electronics",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
    {
      id: 3,
      name: "Running Shoes",
      category: "Sports",
      price: "$89.99",
      src: "https://images.unsplash.com/photo-1542291026-7eec264c27ff",
      alt: "Red running shoes"
    },
    {
      id: 4,
      name: "Smart Watch",
      category: "Electronics",
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      alt: "Smart watch"
    },
    {
      id: 5,
      name: "Sunglasses",
      category: "Accessories",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1572635196237-14b3f281503f",
      alt: "Designer sunglasses"
    },
    {
      id: 6,
      name: "Fitness Tracker",
      category: "Electronics",
      price: "$149.99",
      src: "https://images.unsplash.com/photo-1575311373937-040b8e1fd5b6",
      alt: "Fitness tracker"
    }
  ];

  return (
    <div className="container mx-auto p-6">
      <div className="flex flex-wrap content-around gap-4 h-[130rem]">
        {products.map((product) => (
          <div key={product.id} className="w-64 bg-white rounded-lg shadow-lg p-4">
            <img 
              src={product.src} 
              alt={product.alt}
              className="w-full h-48 object-cover rounded-md"
            />
            <div className="mt-4">
              <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
                {product.category}
              </span>
              <h3 className="text-lg font-semibold mt-2">{product.name}</h3>
              <p className="text-gray-600">{product.price}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Team Member Directory

A team directory with member cards using content-evenly for consistent spacing.

This is a live editor. Play around with it!

export default function TeamDirectory() {
  const team = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "CEO",
      department: "Executive",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Sarah Johnson portrait",
      email: "sarah.j@company.com"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "Lead Developer",
      department: "Engineering",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Chen portrait",
      email: "michael.c@company.com"
    },
    {
      id: 3,
      name: "Emma Williams",
      role: "Design Director",
      department: "Design",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Emma Williams portrait",
      email: "emma.w@company.com"
    },
    {
      id: 4,
      name: "James Rodriguez",
      role: "Marketing Manager",
      department: "Marketing",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "James Rodriguez portrait",
      email: "james.r@company.com"
    },
    {
      id: 5,
      name: "Lisa Park",
      role: "Product Manager",
      department: "Product",
      src: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e",
      alt: "Lisa Park portrait",
      email: "lisa.p@company.com"
    },
    {
      id: 6,
      name: "David Kumar",
      role: "Sales Director",
      department: "Sales",
      src: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7",
      alt: "David Kumar portrait",
      email: "david.k@company.com"
    }
  ];

  return (
    <div className="bg-gray-100 min-h-screen p-8">
      <div className="flex flex-wrap content-evenly gap-6 h-[130rem]">
        {team.map((member) => (
          <div key={member.id} className="w-72 bg-white rounded-xl p-6 shadow-md">
            <img 
              src={member.src} 
              alt={member.alt}
              className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
            />
            <div className="text-center">
              <h3 className="text-xl font-bold">{member.name}</h3>
              <p className="text-blue-600 font-medium">{member.role}</p>
              <p className="text-gray-500 text-sm">{member.department}</p>
              <p className="text-gray-400 text-sm mt-2">{member.email}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Feature Comparison Cards

A feature comparison layout using content-between for spacing between different pricing tiers.

This is a live editor. Play around with it!

export default function FeatureComparison() {
  const features = [
    {
      id: 1,
      tier: "Basic",
      price: "$9.99",
      features: ["10GB Storage", "2 Users", "Basic Support", "Email Notifications", "API Access", "Weekly Backups"],
      icon: "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a",
      color: "blue"
    },
    {
      id: 2,
      tier: "Pro",
      price: "$19.99",
      features: ["50GB Storage", "5 Users", "Priority Support", "SMS Notifications", "Advanced API", "Daily Backups"],
      icon: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      color: "purple"
    },
    {
      id: 3,
      tier: "Enterprise",
      price: "$49.99",
      features: ["Unlimited Storage", "Unlimited Users", "24/7 Support", "Custom Notifications", "Custom API", "Real-time Backups"],
      icon: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40",
      color: "green"
    },
  ];

  return (
    <div className="bg-gray-50 p-8">
      <div className="flex flex-wrap content-between h-[90rem] gap-6">
        {features.map((plan) => (
          <div 
            key={plan.id} 
            className={`w-80 bg-white rounded-2xl shadow-lg p-6 border-t-4 border-${plan.color}-500`}
          >
            <img 
              src={plan.icon} 
              alt={`${plan.tier} icon`}
              className="w-16 h-16 rounded-full mb-4"
            />
            <h3 className="text-2xl font-bold mb-2">{plan.tier}</h3>
            <p className="text-3xl font-bold text-gray-700 mb-6">{plan.price}</p>
            <ul className="space-y-3">
              {plan.features.map((feature, index) => (
                <li key={index} className="flex items-center">
                  <span className={`w-2 h-2 rounded-full bg-${plan.color}-500 mr-2`}></span>
                  {feature}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

Achievement Badges Gallery

A gallery showcasing user achievements and badges using content-center alignment.

This is a live editor. Play around with it!

export default function AchievementGallery() {
  const achievements = [
    {
      id: 1,
      title: "Code Master",
      description: "Completed 100 coding challenges",
      level: "Expert",
      src: "https://images.unsplash.com/photo-1523800503107-5bc3ba2a6f81",
      alt: "Code Master badge",
      points: 1000
    },
    {
      id: 2,
      title: "Bug Hunter",
      description: "Found 50 critical bugs",
      level: "Advanced",
      src: "https://images.unsplash.com/photo-1546776310-eef45dd6d63c",
      alt: "Bug Hunter badge",
      points: 750
    },
    {
      id: 3,
      title: "Team Player",
      description: "Collaborated on 25 projects",
      level: "Intermediate",
      src: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca",
      alt: "Team Player badge",
      points: 500
    },
    {
      id: 4,
      title: "Innovation Guru",
      description: "Created 10 unique solutions",
      level: "Expert",
      src: "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4",
      alt: "Innovation Guru badge",
      points: 1200
    },
    {
      id: 5,
      title: "Speed Demon",
      description: "Fastest problem solver",
      level: "Advanced",
      src: "https://images.unsplash.com/photo-1533073526757-2c8ca1df9f1c",
      alt: "Speed Demon badge",
      points: 800
    },
    {
      id: 6,
      title: "Mentor Star",
      description: "Helped 30 newcomers",
      level: "Expert",
      src: "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4",
      alt: "Mentor Star badge",
      points: 1500
    }
  ];

  return (
    <div className="bg-gradient-to-br from-purple-900 to-blue-900 min-h-screen p-8">
      <div className="flex flex-wrap content-center gap-8 h-[120rem]">
        {achievements.map((badge) => (
          <div 
            key={badge.id} 
            className="w-64 bg-white bg-opacity-10 backdrop-blur-lg rounded-lg p-6 text-white"
          >
            <img 
              src={badge.src} 
              alt={badge.alt}
              className="w-24 h-24 mx-auto mb-4 rounded-full border-4 border-white"
            />
            <div className="text-center">
              <h3 className="text-xl font-bold mb-2">{badge.title}</h3>
              <p className="text-sm text-gray-300 mb-3">{badge.description}</p>
              <div className="flex justify-between items-center">
                <span className="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">
                  {badge.level}
                </span>
                <span className="text-yellow-300 font-bold">
                  {badge.points} pts
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Recipe Collection Grid

A recipe collection display using content-start for a Pinterest-style masonry layout.

This is a live editor. Play around with it!

export default function RecipeCollection() {
  const recipes = [
    {
      id: 1,
      title: "Vegetarian Buddha Bowl",
      category: "Healthy",
      prepTime: "25 mins",
      difficulty: "Easy",
      src: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd",
      alt: "Vegetarian Buddha Bowl",
      author: "Chef Maria"
    },
    {
      id: 2,
      title: "Classic Beef Burger",
      category: "American",
      prepTime: "30 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1568901346375-23c9450c58cd",
      alt: "Classic Beef Burger",
      author: "Chef John"
    },
    {
      id: 3,
      title: "Chocolate Lava Cake",
      category: "Dessert",
      prepTime: "40 mins",
      difficulty: "Hard",
      src: "https://images.unsplash.com/photo-1563805042-7684c019e1cb",
      alt: "Chocolate Lava Cake",
      author: "Chef Sarah"
    },
    {
      id: 4,
      title: "Mediterranean Salad",
      category: "Healthy",
      prepTime: "15 mins",
      difficulty: "Easy",
      src: "https://images.unsplash.com/photo-1540189549336-e6e99c3679fe",
      alt: "Mediterranean Salad",
      author: "Chef Alex"
    },
    {
      id: 5,
      title: "Sushi Roll Platter",
      category: "Japanese",
      prepTime: "60 mins",
      difficulty: "Expert",
      src: "https://images.unsplash.com/photo-1579871494447-9811cf80d66c",
      alt: "Sushi Roll Platter",
      author: "Chef Yuki"
    },
    {
      id: 6,
      title: "Wood-fired Pizza",
      category: "Italian",
      prepTime: "45 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1513104890138-7c749659a591",
      alt: "Wood-fired Pizza",
      author: "Chef Marco"
    }
  ];

  return (
    <div className="bg-gray-100 p-6">
      <div className="columns-1 md:columns-2 lg:columns-3 gap-4 space-y-4 h-[130rem]">
        {recipes.map((recipe) => (
          <div 
            key={recipe.id} 
            className="break-inside-avoid bg-white rounded-xl overflow-hidden shadow-md"
          >
            <img 
              src={recipe.src} 
              alt={recipe.alt}
              className="w-full h-48 object-cover"
            />
            <div className="p-4">
              <div className="flex justify-between items-center mb-2">
                <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
                  {recipe.category}
                </span>
                <span className="text-gray-500 text-sm">{recipe.prepTime}</span>
              </div>
              <h3 className="text-lg font-bold mb-2">{recipe.title}</h3>
              <div className="flex justify-between items-center">
                <span className="text-sm text-gray-600">by {recipe.author}</span>
                <span className={`text-sm px-2 py-1 rounded ${
                  recipe.difficulty === 'Easy' ? 'bg-blue-100 text-blue-800' :
                  recipe.difficulty === 'Medium' ? 'bg-yellow-100 text-yellow-800' :
                  'bg-red-100 text-red-800'
                }`}>
                  {recipe.difficulty}
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Best Practices

Maintain Design Consistency

When applying align-content, adhere to a defined pattern that complements the container’s layout logic. For instance, use content-center for symmetrical alignment in components like modal dialogs or centered grids. In multi-row designs, avoid inconsistent alignment between sections to maintain visual balance. This ensures that users navigate the content intuitively, fostering familiarity throughout your application.

Leverage Utility Combinations

Combining utilities effectively unlocks complex flexbox and grid structures without introducing unnecessary custom CSS. For a product gallery, combining content-around with flex-wrap and container-level padding utilities ensures accurate row distribution while maintaining proper column spacing.

Additionally, mix align-content utilities with responsive utilities to personalize behavior dynamically. For example, in a responsive navbar, {md:content-center lg:content-between} distributes space between items evenly for desktop, while retaining a center alignment for smaller screens. Tailwind scaffolds these combinations into a semantically readable, low-maintenance utility chain.

Accessibility Considerations

Enhance Readability and Navigability

Aligning content appropriately enhances the overall accessibility of a web application. Proper align-content choices reduce the cognitive load for users by creating a well-organized and visually comprehensible layout. For instance, using content-center for forms or content-between for data grids ensures that users can easily scan each section without distractions. Coupling these utilities with labels and headings further improves information hierarchy and interactions.

Utilities like content-start help prioritize readability in scenarios involving stacked content. For example, in a FAQ section, aligning answers to the start of the cross-axis ensures that screen readers and keyboard users interact directly with logical content flows.

Support Accessible Interactive Elements

Interactive UI components like buttons, cards, or dropdowns rely on precise alignment to maintain accessibility. For example, a directory component using content-center ensures that clickable member cards remain aligned centrally, avoiding uneven row clustering. Interaction layers added using Tailwind’s focus-visible variants further improve clarity for screen readers and keyboard users, ensuring components respond dynamically.

Debugging Common Issues

Handling Nested Element Challenges

Component nesting can amplify alignment issues, especially when inner components like media cards or child containers apply conflicting align-items and align-content classes, leading to visual misalignment. To resolve these conflicts:

Prioritize Parent-First Design: Ensure that parent containers have consistent alignment settings, such as content-stretch or content-between. Align child elements accordingly to maintain harmony.
Avoid Redundant Alignment Classes: In complex layouts like modals with tabs or forms, refrain from duplicating alignment logic. For instance, if a modal uses content-center, avoid adding conflicting classes like content-around to child elements. Instead, standardize alignment by refactoring rows into reusable component blocks.

Justify Self Align Items