graphql
react

Tailwind CSS 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.
html
<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

Item 1
items 2
items 3
Item 1
items 2
items 3

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.

html
<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

ClassProperties
justify-self-autojustify-self: auto;
justify-self-startjustify-self: start;
justify-self-endjustify-self: end;
justify-self-centerjustify-self: center;
justify-self-stretchjustify-self: stretch;

Windframe Tailwind blocks

footer

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner