Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Align Content

Quiz

Tailwind CSS Align Content is a utility class used to position rows in a multi-row flex container and grid container along the cross axis.

Tailwind CSS Align Content Classes

The following is the list of Tailwind CSS Align Content Classes that help in the effective alignment of flex and grid items along the cross axis.

Class	CSS Properties
content-normal	align-content: normal;
content-center	align-content: center;
content-start	align-content: flex-start;
content-end	align-content: flex-end;
content-between	align-content: space-between;
content-around	align-content: space-around;
content-evenly	align-content: space-evenly;
content-baseline	align-content: baseline;
content-stretch	align-content: stretch;

Functionality of Tailwind CSS Align Content Classes

content-normal: This class has default behavior to align items normally as if no align-content property is set.
content-center: This class is used to align items to the center of the cross-axis.
content-start: This class is used to align items to the start of the cross-axis.
content-end: This class is used to align items to the end of the cross-axis.
content-between: This class is used to align items along the cross-axis with equal space between each item.
content-around: This class aligns items along the cross-axis with equal space around each item.
content-evenly: This class aligns items along the cross-axis with equal space between and around each item.
content-baseline: This class is used to align items along their baseline.
content-stretch: This class stretches the flex or grid items to fill the available space in the container.

Tailwind CSS Align Content Classes Examples

The following examples will illustrate the Tailwind CSS Align Content class utility.

Default Aligned Grid Items

The content-normal class sets the default positioning of items, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Normal Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-56 content-normal
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Center Aligned Grid Items

The content-center class sets the rows of items in the center of the cross-axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Center Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-56 content-center
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Start & End Aligned Flex Items

The content-start & content-end class sets the rows of items in the starting and ending of the cross-axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Align Content Start Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-start
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 4</div>
        <div class="bg-green-500 p-4 w-28">Item 5</div>
        <div class="bg-green-500 p-4 w-28">Item 6</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content End Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-end
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 4</div>
        <div class="bg-green-500 p-4 w-28">Item 5</div>
        <div class="bg-green-500 p-4 w-28">Item 6</div>
    </div>
</body>

</html>

Grid Items Between & Around Alignment

The content-between & content-around class sets the rows of items along the cross-axis with equal space between and around each item, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content between Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-48 content-between
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Around Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-48 content-around
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Evenly & Baseline Aligned Flex Items

The content-evenly & content-baseline class sets the rows of items evenly and along the baseline in the cross-axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Evenly Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-evenly
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 4</div>
        <div class="bg-green-500 p-4 w-28">Item 5</div>
        <div class="bg-green-500 p-4 w-28">Item 6</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Baseline Class
    </h2>
    <div class="flex flex-wrap gap-4 h-48 content-baseline
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 4</div>
        <div class="bg-green-500 p-4 w-28">Item 5</div>
        <div class="bg-green-500 p-4 w-28">Item 6</div>
    </div>
</body>

</html>

Stretched Grid Items

The content-stretch class sets the rows of items stretched along the cross-axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Content Stretch Class
    </h2>
    <div class="grid grid-cols-3 gap-4 h-48 content-stretch
                bg-lime-200">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Print Page