Tailwind CSS Justify Self

This class accepts two values in tailwind CSS. The different properties are covered in the class form. It is the alternative to the CSS justify-self property. This class is used to specify the alignment of a content’s position along with the appropriate axis in a CSS Grid.

Justify self class options:

• justify-self-auto 
• justify-self-start 
• justify-self-end 
• justify-self-center 
• justify-self-stretch 

justify-self-auto: It is the value used to align an item based on the value of the grid’s justify-items class.

Syntax:

<element class="justify-self-auto">...</element>

Example:

Output:

justify-self-start: It allows the content to align itself to the left of the cell.

Syntax:

<element class="justify-self-start">...</element>

Example:

Output:

justify-self-end: It allows the content to align itself to the right of the cell.

Syntax:

<element class="justify-self-end">...</element>

Example:

Output:

justify-self-center:  It allows the content to align itself to the center of the cell.

Syntax:

<element class="justify-self-center">...</element>

Example:

Output:

justify-self-stretch: It is the default value of this property and it makes the content fill the whole width of the cell.

Syntax:

<element class="justify-self-stretch">...</element>

Example:

Output: