Justify Content in Tailwind CSS 4 – Complete Guide

When building modern layouts with Flexbox or Grid, controlling the alignment of elements is very important.

The justify-content property controls how items are positioned along the main axis (horizontal direction) of a flex or grid container.

Tailwind CSS provides several utility classes to control this behavior easily.

In this tutorial you will learn:

What justify-content is
How to use Tailwind justify utilities
Practical layout examples
Responsive justify-content usage

We will use the Tailwind CSS 4 browser CDN.

https://unpkg.com/@tailwindcss/browser@4

Step 1: Setup Tailwind CSS CDN

Create a basic HTML structure and include the CDN.

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>

<body class="p-10">

<h1 class="text-3xl font-bold mb-6">
Justify Content in Tailwind CSS
</h1>

</body>
</html>

Now you can start using Tailwind utilities.

What is Justify Content?

The justify-content property controls how items are aligned horizontally inside a flex container.

Example using pure CSS:

justify-content: center;

In Tailwind you can write:

justify-center

Tailwind Justify Content Utilities

Class	CSS Property
justify-start	justify-content: flex-start
justify-end	justify-content: flex-end
justify-center	justify-content: center
justify-between	justify-content: space-between
justify-around	justify-content: space-around
justify-evenly	justify-content: space-evenly
justify-stretch	justify-content: stretch
justify-normal	justify-content: normal

Example 1 – justify-start

justify-start aligns items at the start (left side) of the container.

<div class="flex justify-start gap-4 bg-gray-100 p-4">

<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>

</div>

Result:

All items appear on the left side of the container.

Example 2 – justify-center

justify-center aligns items at the center of the container.

<div class="flex justify-center gap-4 bg-gray-100 p-4">

<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
<div class="bg-purple-500 text-white p-4">04</div>

</div>

Result:

All items appear centered horizontally.

Example 3 – justify-end

justify-end moves items to the end (right side) of the container.

<div class="flex justify-end gap-4 bg-gray-100 p-4">

<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>

</div>

Result:

Items align on the right side.

Example 4 – justify-between

justify-between distributes items so the first item is at the start and last item is at the end.

<div class="flex justify-between bg-gray-100 p-4">

<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>

</div>

Result:

Space is placed between each item.

Example 5 – justify-around

justify-around creates equal space around each item.

<div class="flex justify-around bg-gray-100 p-4">

<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>

</div>

Result:

Every item has space on both sides.

Example 6 – justify-evenly

justify-evenly creates equal spacing between all items and container edges.

<div class="flex justify-evenly bg-gray-100 p-4">

<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>

</div>

Result:

Spacing is perfectly balanced across the container.

Example 7 – justify-stretch (Grid Example)

justify-stretch allows elements to stretch across available space.

<div class="grid grid-cols-[4rem_auto_4rem] justify-stretch gap-4 bg-gray-100 p-4">

<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>

</div>

This works mainly with grid layouts.

Example 8 – justify-normal

justify-normal uses the default alignment behavior.

<div class="flex justify-normal gap-4 bg-gray-100 p-4">

<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>

</div>

Safe Alignment Utilities

Tailwind also provides safe alignment utilities.

Examples:

justify-center-safe
justify-end-safe

These prevent layout overflow.

Example:

<div class="flex justify-center-safe gap-4">

<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>

</div>

If space is limited, items automatically move to start instead of breaking layout.

Responsive Justify Content

Tailwind allows responsive alignment.

Example:

<div class="flex justify-start md:justify-between bg-gray-100 p-4">

<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>

</div>

Behavior:

Mobile → items start aligned
Medium screens → space distributed between items

Real Example – Navbar Layout

<div class="flex justify-between items-center bg-blue-600 text-white p-4">

<div class="font-bold text-xl">
Logo
</div>

<div class="flex gap-6">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>

</div>

This is a typical navigation bar layout.

Why Use Justify Utilities in Tailwind?

Benefits include:

Faster UI Development

No need to write custom CSS.

Easy Alignment

Control layout with simple utility classes.

Responsive Design

Breakpoints allow flexible layouts across devices.

Clean and Maintainable Code

Tailwind keeps HTML readable and structured.

FAQs

1. What does justify-content do?

The justify-content property controls how items are aligned horizontally inside a flex or grid container.

2. What is the difference between justify-between and justify-around?

Utility	Behavior
justify-between	Space only between items
justify-around	Space on both sides of items

3. What is justify-evenly?

justify-evenly distributes space equally between items and container edges.

4. Can justify-content be used with Grid?

Yes. Tailwind justify utilities work with both Flexbox and Grid layouts.

5. What is justify-center-safe?

justify-center-safe centers items but prevents layout overflow by moving items to the start when space is insufficient.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Flexbox with Tailwind CSS 4 – Flex Container & Flex Items

Next: Align Items in Tailwind CSS 4 – Complete Guide with Flexbox Examples

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.

Justify Content in Tailwind CSS 4 – Complete Guide

Step 1: Setup Tailwind CSS CDN

What is Justify Content?

Tailwind Justify Content Utilities

Example 1 – justify-start

Example 2 – justify-center

Example 3 – justify-end

Example 4 – justify-between

Example 5 – justify-around

Example 6 – justify-evenly

Example 7 – justify-stretch (Grid Example)

Example 8 – justify-normal

Safe Alignment Utilities

Responsive Justify Content

Real Example – Navbar Layout

Why Use Justify Utilities in Tailwind?

Faster UI Development

Easy Alignment

Responsive Design

Clean and Maintainable Code

FAQs

1. What does justify-content do?

2. What is the difference between justify-between and justify-around?

3. What is justify-evenly?

4. Can justify-content be used with Grid?

5. What is justify-center-safe?

Your Feedback

Quick Links

Company