Open In App

Tailwind CSS Justify Content

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts two values in tailwind CSS. It is the alternative to the CSS justify-content property. This class is used to describe the alignment of the flexible box container. It contains the space between and around content items along the main axis of a flex container. It is basically used for controlling how flex and grid items are positioned along a container’s main axis.

Justify Content classes:

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

justify-start: It is used to align flex items from the start of the container.

Syntax:

<element class="justify-start">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Justify Content Class</b
    <div id="main" class="flex justify-start flex-row"
        <div class="bg-green-700 w-24 h-12">1</div
        <div class="bg-green-600 w-24 h-12">2</div
        <div class="bg-green-500 w-24 h-12">3</div
        <div class="bg-green-400 w-24 h-12">4</div
    </div
</body
  
</html>


Output:

justify-end: It is used to align flex items from the end of the container.

Syntax:

<element class="justify-end">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Justify Content Class</b
    <div id="main" class="flex justify-end flex-row"
        <div class="bg-green-700 w-24 h-12">1</div
        <div class="bg-green-600 w-24 h-12">2</div
        <div class="bg-green-500 w-24 h-12">3</div
        <div class="bg-green-400 w-24 h-12">4</div
    </div
</body
  
</html>


Output:

justify-center: It is used to align flex items from the center of the container.

Syntax:

<element class="justify-center">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Justify Content Class</b
    <div id="main" class="flex justify-center flex-row"
        <div class="bg-green-700 w-24 h-12">1</div
        <div class="bg-green-600 w-24 h-12">2</div
        <div class="bg-green-500 w-24 h-12">3</div
        <div class="bg-green-400 w-24 h-12">4</div
    </div
</body
  
</html>


Output:

justify-between: The flex items are placed with even spacing where the item is pushed to start and the last item is pushed to end.

Syntax:

<element class="justify-between">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Justify Content Class</b
    <div id="main" class="flex justify-between flex-row"
        <div class="bg-green-700 w-24 h-12">1</div
        <div class="bg-green-600 w-24 h-12">2</div
        <div class="bg-green-500 w-24 h-12">3</div
        <div class="bg-green-400 w-24 h-12">4</div
    </div
</body
  
</html>


Output:

justify-around: The flex items are placed with equal spacing from each other, the corners.

Syntax:

<element class="justify-around">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Justify Content Class</b
    <div id="main" class="flex justify-around flex-row"
        <div class="bg-green-700 w-24 h-12">1</div
        <div class="bg-green-600 w-24 h-12">2</div
        <div class="bg-green-500 w-24 h-12">3</div
        <div class="bg-green-400 w-24 h-12">4</div
    </div
</body
  
</html>


Output:

justify-evenly: The items are positioned with equal spacing between them but the spacing from corners differs.

Syntax:

<element class="justify-evenly">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Justify Content Class</b
    <div id="main" class="flex justify-evenly flex-row"
        <div class="bg-green-700 w-24 h-12">1</div
        <div class="bg-green-600 w-24 h-12">2</div
        <div class="bg-green-500 w-24 h-12">3</div
        <div class="bg-green-400 w-24 h-12">4</div
    </div
</body
  
</html>


Output:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads