Tailwind Justify Content

The justify-content utilities in Tailwind control how flex items are placed along the main axis of a flex container. In plain terms—this decides where your items sit horizontally (in a row) or vertically (in a column).

How to Set Tailwind Justify Content

• justify-start: items pack toward the start of the axis.

• justify-end: items push to the far end.

• justify-center: items gather in the middle.

• justify-between: first item goes to the start, last item to the end, the rest spread evenly.

• justify-around: items spread out with equal space around them, including at the edges.

• justify-evenly: like around, but the gaps between items and edges are all the same size.

Tailwind justify-start

Items stick to the start of the axis.

<div class="flex justify-start....">
	<div class="flex-1">A</div>
	<div class="flex-1">B</div>
	<div class="flex-1">C</div>
</div>

Preview

Tailwind justify-center

Everything sits in the middle.

<div class="flex justify-center....">
	<div class="flex-1">A</div>
	<div class="flex-1">B</div>
	<div class="flex-1">C</div>
</div>

Preview

Tailwind justify-between

First item hugs the start, last hugs the end, everything else spreads out in between.

<div class="flex justify-between....">
	<div class="flex-1">A</div>
	<div class="flex-1">B</div>
	<div class="flex-1">C</div>
</div>

Preview

Tailwind justify-around

Each item gets equal space around it—including at the edges.

<div class="flex justify-around....">
	<div class="flex-1">A</div>
	<div class="flex-1">B</div>
	<div class="flex-1">C</div>
</div>

Tailwind justify-evenly

All gaps—including the ones on the outside edges—are the same.

<div class="flex justify-evenly....">
	<div class="flex-1">A</div>
	<div class="flex-1">B</div>
	<div class="flex-1">C</div>
</div>

justify-content is one of the core flexbox tools you’ll use in Tailwind. Once you understand how each option handles spacing—start, center, between, around, evenly. You can quickly line up elements in whatever layout you need.

Tailwind Justify Content class Table

📚 Keep Exploring

• Tailwind CSS Flex

• Tailwind align items

Windframe Tailwind blocks

footer