Justify Self
Utilities for controlling how an individual grid item is aligned along its inline axis.
Default class reference
Class | Properties |
---|---|
justify-self-auto | justify-self: auto; |
justify-self-start | justify-self: start; |
justify-self-end | justify-self: end; |
justify-self-center | justify-self: center; |
justify-self-stretch | justify-self: stretch; |
Auto
Use justify-self-auto
to align an item based on the value of the grid’s justify-items
property:
<div class="grid justify-items-stretch ...">
<!-- ... -->
<div class="justify-self-auto ...">1</div>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- ... -->
</div>
Start
Use justify-self-start
to align a grid item to the start its inline axis:
<div class="grid justify-items-stretch ...">
<!-- ... -->
<div class="justify-self-start ...">1</div>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- ... -->
</div>
Center
Use justify-self-center
to align a grid item along the center its inline axis:
<div class="grid justify-items-stretch ...">
<!-- ... -->
<div class="justify-self-center ...">1</div>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- ... -->
</div>
End
Use justify-self-end
to align a grid item to the end its inline axis:
<div class="grid justify-items-stretch ...">
<!-- ... -->
<div class="justify-self-end ...">1</div>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- ... -->
</div>
Stretch
Use justify-self-stretch
to stretch a grid item to fill the grid area on its inline axis:
<div class="grid justify-items-start ...">
<!-- ... -->
<div class="justify-self-stretch ...">1</div>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- ... -->
</div>
Responsive
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 Responsive Design documentation.
Customizing
Variants
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 variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ justifySelf: ['hover', 'focus'],
}
}
}
Disabling
If you don’t plan to use the justify-self utilities in your project, you can disable them entirely by setting the justifySelf
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ justifySelf: false,
}
}