Tailwind CSS Justify Items

Tailwind CSS offers a variety of utility classes to align items horizontally using the justify-items property. This can be useful when working with grid or flexbox layouts. In this guide, we will explore the usage of justify-items utility classes in Tailwind CSS.

Syntax

The syntax for using justify-items utility classes in Tailwind CSS is as follows:

justify-items-{value}

Where value can be one of the following options:

• start: align items to the start of the container
• end: align items to the end of the container
• center: align items to the center of the container
• stretch: stretch items to fill the container
• baseline: align items to their respective baselines

Example

<div class="grid grid-cols-3 justify-items-start">
  <div class="bg-red-500">Item 1</div>
  <div class="bg-blue-500">Item 2</div>
  <div class="bg-green-500">Item 3</div>
</div>

Output

The above example will result in the following output:

Explanation

In the above example, we have created a 3-column grid container using Tailwind CSS utility classes. We have applied the justify-items-start class to the container which aligns the items to the start of the container.

Use

The justify-items utility classes in Tailwind CSS can be useful when working with grid or flexbox layouts. They can be applied to containers to align items horizontally within the container.

Important Points

• justify-items utility classes can be used with both grid and flexbox layouts
• The justify-items property only applies to the direct children of the container
• If you want to apply the same alignment to all items in the container, use the justify-content property instead

Summary

In this guide, we explored the usage of justify-items utility classes in Tailwind CSS. We learned about the syntax, examples, output, explanation, use, important points, and summary of the justify-items utility classes.