Align Content
Start
Use to pack rows in a container against the start of the cross axis:
Use content-center
to pack rows in a container in the center of the cross axis:
<div class="flex content-center flex-wrap bg-gray-200 h-48">
<div class="w-1/3 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
<div class="w-1/3 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
</div>
</div>
End
Use to pack rows in a container against the end of the cross axis:
Use content-between
to distribute rows in a container such that there is an equal amount of space between each line:
<div class="flex content-between flex-wrap bg-gray-200 h-48">
<div class="w-1/3 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="w-1/3 p-2">
</div>
<div class="w-1/3 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
</div>
</div>
Space around
Use to distribute rows in a container such that there is an equal amount of space around each line:
For more information about Tailwind’s responsive design features, check out the documentation.
all
sm
md
lg
<div class="content-start sm:content-end md:content-center lg:content-between xl:content-around ...">
<!-- ... -->
</div>
1
2
3
4
5
Customizing
By default, only responsive variants are generated for align-content utilities.
You can control which variants are generated for the align-content utilities by modifying the alignContent
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants:
Disabling
If you don’t plan to use the align-content utilities in your project, you can disable them entirely by setting the alignContent
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ alignContent: false,
}