Tailwind Justify Self

The justify-self utility class in Tailwind CSS allows you to control the horizontal alignment of individual grid items within a grid container along the main axis. With Tailwind's justify-self class, you can easily adjust the positioning of grid items horizontally.

Applying Justify Self

To apply justify self to a grid item, you can use the justify-self-{value} utility class, where {value} represents the desired alignment. The {value} can be one of the following options:

• justify-self-auto: The grid item inherits the justification from the grid container.
• justify-self-start: The grid item is aligned to the start of the grid container.
• justify-self-end: The grid item is aligned to the end of the grid container.
• justify-self-center: The grid item is centered horizontally within the grid container.
• justify-self-stretch: The grid item stretches to fill the width of the grid container.

<div class="grid grid-cols-3">
  <div class="bg-yellow-500 justify-self-start">Item 1</div>
  <div class="bg-yellow-500 justify-self-center">Item 2</div>
  <div class="bg-yellow-500 justify-self-end">Item 3</div>
</div>

Preview

Responsive Justify Self

Tailwind CSS allows you to apply justify self classes responsively at different breakpoints. To use responsive justify self classes, you can append the breakpoint prefix to the utility class. For example, md:justify-self-center applies the justify-self-center class starting from the medium breakpoint and above.

<div class="grid grid-cols-2 md:grid-cols-3">
  <div class="bg-gray-200 md:justify-self-center">Item 1</div>
  <div class="bg-gray-200">Item 2</div>
  <div class="bg-gray-200">Item 3</div>
</div>

In the above example, a grid container with 2 columns by default (grid-cols-2) and 3 columns starting from the medium breakpoint and above (md:grid-cols-3) is created. The first grid item (Item 1) has the md:justify-self-center class applied to center it horizontally within the grid container starting from the medium breakpoint.

Tailwind Justify Self Class Table

Windframe Tailwind blocks

footer