Justify Self
v1.8.0+
Utilities for controlling how an individual grid item is aligned along its inline axis.
Auto
Use to align an item based on the value of the grid’s justify-items
property:
Use justify-self-start
to align a grid item to the start its inline axis:
<div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">1</div>
<div class="justify-self-start text-gray-800 bg-gray-500 flex justify-center items-center px-4 py-2">2</div>
<div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">3</div>
<div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">4</div>
<div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">5</div>
<div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">6</div>
</div>
Center
Use justify-self-center
to align a grid item along the center its inline axis:
Use justify-self-end
to align a grid item to the end its inline axis:
<div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">1</div>
<div class="justify-self-end text-gray-800 bg-gray-500 flex justify-center items-center px-4 py-2">2</div>
<div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">4</div>
<div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">5</div>
<div class="text-gray-700 bg-gray-400 flex justify-center items-center px-4 py-2">6</div>
</div>
Stretch
Use justify-self-stretch
to stretch a grid item to fill the grid area on its inline axis:
To control the alignment of a grid item inside its grid area at a specific breakpoint, add a {screen}:
prefix to any existing utility class. For example, use md:justify-self-end
to apply the justify-self-end
utility at only medium screen sizes and above.
For more information about Tailwind’s responsive design features, check out the documentation.
Customizing
By default, only responsive variants are generated for justify-self utilities.
You can control which variants are generated for the justify-self utilities by modifying the justifySelf
property in the section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js
module.exports = {
variants: {
// ...
- justifySelf: ['responsive'],
+ justifySelf: ['responsive', 'hover', 'focus'],
}