Tailwind CSS Align Content

Last Updated : 23 Jul, 2025

This class accepts lots of values in Tailwind CSS. It is the alternative to the CSS Align Content property. This class is used for changing the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container. This property defines how each flex line is aligned within a flexbox and is only applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items present.

Align Content Classes:

content-center
content-start
content-end
content-between
content-around
content-evenly

content-center

This class is used to place lines on the center of the flex container.

Syntax:

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

Example:

HTML

<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@1.9.6/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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap  content-center  bg-green-200 border-solid border-4   border-green-900"> <div class="bg-green-900 w-24 h-12">1</div> <div class="bg-green-800 w-24 h-12">2</div> <div class="bg-green-700 w-24 h-12">3</div> <div class="bg-green-600 w-24 h-12">4</div> <div class="bg-green-500 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>

Output:

content-start

This class is used to place lines on the start of the flex container.

Syntax:

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

Example:

HTML

<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@1.9.6/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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap  content-start  bg-green-200 border-solid border-4   border-green-900"> <div class="bg-green-900 w-24 h-12">1</div> <div class="bg-green-800 w-24 h-12">2</div> <div class="bg-green-700 w-24 h-12">3</div> <div class="bg-green-600 w-24 h-12">4</div> <div class="bg-green-500 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>

Output:

content-end

This class is used to place lines on the end of the flex container.

Syntax:

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

Example:

HTML

<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@1.9.6/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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap  content-end  bg-green-200 border-solid border-4   border-green-900"> <div class="bg-green-900 w-24 h-12">1</div> <div class="bg-green-800 w-24 h-12">2</div> <div class="bg-green-700 w-24 h-12">3</div> <div class="bg-green-600 w-24 h-12">4</div> <div class="bg-green-500 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>

Output:

content-between

This class is used to distribute rows in a container such that there is an equal amount of space between each line.

Syntax:

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

Example:

HTML

<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@1.9.6/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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap  content-between  bg-green-200 border-solid border-4   border-green-900"> <div class="bg-green-900 w-24 h-12">1</div> <div class="bg-green-800 w-24 h-12">2</div> <div class="bg-green-700 w-24 h-12">3</div> <div class="bg-green-600 w-24 h-12">4</div> <div class="bg-green-500 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>

Output:

content-around

This class is used to distribute rows in a container such that there is an equal amount of space around each line.

Syntax:

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

Example:

HTML

<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@1.9.6/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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap  content-around  bg-green-200 border-solid border-4   border-green-900"> <div class="bg-green-900 w-24 h-12">1</div> <div class="bg-green-800 w-24 h-12">2</div> <div class="bg-green-700 w-24 h-12">3</div> <div class="bg-green-600 w-24 h-12">4</div> <div class="bg-green-500 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>

Output:

content-evenly

This class is used to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around class.

Syntax:

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

Example:

HTML

<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@1.9.6/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 Align Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap  content-evenly  bg-green-200 border-solid border-4   border-green-900"> <div class="bg-green-900 w-24 h-12">1</div> <div class="bg-green-800 w-24 h-12">2</div> <div class="bg-green-700 w-24 h-12">3</div> <div class="bg-green-600 w-24 h-12">4</div> <div class="bg-green-500 w-24 h-12">5</div> <div class="bg-green-400 w-24 h-12">6</div> </div> </body> </html>