Tailwind CSS Justify Self

The justify-self property in Tailwind CSS is used to control the horizontal alignment of a single grid item. It works by aligning the content of the item within its grid cell.

Syntax

The basic syntax for using the justify-self property in Tailwind CSS is:

<div class="justify-self-{value}"></div>

Here, value refers to the desired horizontal alignment value, which can be one of:

• auto
• start
• end
• center
• stretch

Example

Let's see a practical example of how to use the justify-self property in Tailwind CSS:

<div class="grid grid-cols-3 gap-4">
  <div class="bg-red-500 text-white p-4">Item 1</div>
  <div class="bg-yellow-500 text-white p-4 justify-self-center">Item 2</div>
  <div class="bg-green-500 text-white p-4">Item 3</div>
</div>

In this example, we have a 3-column grid, and we have applied the justify-self-center class to the second item. This will align the second item to the center of its grid cell.

Output

The above example will output something like this:

Explanation

The justify-self property is used to adjust the horizontal alignment of a single grid item, as opposed to the justify-items property which is used to adjust the horizontal alignment of all grid items.

By default, each grid item inherits its justify-self value from the justify-items value set on the container element. However, this can be overridden on a per-item basis using the justify-self property.

Use

The justify-self property can be used in various scenarios where you want to align a single grid item horizontally.

Some examples where you might use justify-self include:

• Aligning an image or icon within its grid cell
• Centering a single cell's content within a larger table
• Aligning text within a specific grid cell

Important Points

Here are some important points to keep in mind when using the justify-self property in Tailwind CSS:

• The justify-self property only works within CSS Grid layout, and will have no effect on normal elements
• justify-self values can be applied to single grid items using the justify-self-{value} class
• By default, each grid item will inherit its justify-self value from the justify-items value set on the container element
• The justify-self property controls horizontal alignment only. Vertical alignment is controlled using the align-self property.

Summary

The justify-self property in Tailwind CSS is an incredibly handy tool for aligning a single grid item horizontally within its grid cell. By using the various alignment values available, you can easily center, stretch, or move content to either end of a cell, and create complex layout designs with ease.