Tailwind Justify Items

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

Applying Justify Items

To apply the alignment to a flex container, you can use the justify-items-{alignment} utility class, where {alignment} represents the desired alignment. Here are the available alignment options:

• justify-items-start: Aligns flex items to the start of the main axis.
• justify-items-end: Aligns flex items to the end of the main axis.
• justify-items-center: Aligns flex items to the center of the main axis.
• justify-items-stretch: Stretches flex items to fill the main axis.
• justify-items-auto: Resets the alignment to the value set by the flex container.

<div class="flex justify-items-center">
  <div class="bg-purple-500 text-center ">item 1</div>
  <div class="bg-purple-500 text-center">item 2</div>
  <div class="bg-purple-500 text-center">item 3</div>
</div>

Preview

Responsive Justify Items

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

<div class="flex justify-items-start md:justify-items-center">
  <!-- Flex items here -->
</div>

In the above example, the flex items are aligned to the start of the main axis by default (justify-items-start), but starting from the medium breakpoint and above, the alignment is changed to center (justify-items-center).

Tailwind Justify-items Class Table

Windframe Tailwind blocks

footer