Tailwind CSS - Justify Content

The justify-content property in Tailwind CSS is used to align the items of a flex container along the main axis.

Syntax

<div class="flex justify-{property}">
    <!-- Items to align -->
</div>

The justify-{property} can take the following values:

• justify-start
• justify-end
• justify-center
• justify-between
• justify-around
• justify-evenly

Example

<div class="flex justify-center">
    <div class="bg-blue-500 rounded-full w-12 h-12"></div>
    <div class="bg-green-500 rounded-full w-12 h-12"></div>
    <div class="bg-red-500 rounded-full w-12 h-12"></div>
</div>

Output

Explanation

In the above example, a flex container is created and the justify-center class is applied to align the child elements along the center of the container on the main (horizontal) axis.

Use

Use the justify-content property to align the items of a flex container along the main axis.

Important Points

• The justify-content property only works on flex containers.
• It helps in aligning the items on the main axis of a flex container.

Summary

The justify-content property in Tailwind CSS is used to align the items of a flex container along the main axis by specifying the container's alignment.