Tailwind CSS Place Self

The place-self utility in Tailwind CSS allows you to set both the align-self and justify-self CSS properties at once. It is used to align items within their container, both horizontally and vertically.

Syntax

place-self: [start | end | center | stretch] [start | end | center | stretch];

• start: aligns the item to the start of the container
• end: aligns the item to the end of the container
• center: aligns the item to the center of the container
• stretch: stretches the item to fill the entire container

Example

<div class="place-self-center">Centered Item</div>

Output

The place-self-center utility class aligns the item to the center of the container.

Explanation

The place-self utility class is used to set the alignment of an item within its container. By default, this utility sets the align-self and justify-self properties to auto. However, using place-self-{alignment} utility classes, like place-self-center, we can set both the align-self and justify-self properties of an item.

Use

The place-self utility is useful when you need to align items within a grid cell or a flex container. With this utility, you can easily align an item both horizontally and vertically, without having to use multiple CSS properties.

Important Points

• place-self sets both align-self and justify-self properties of an item.
• It is used to align items within a container, both horizontally and vertically.
• The utility classes for place-self are place-self-start, place-self-end, place-self-center, and place-self-stretch.
• When using place-self within a grid, it applies to a grid item, and when using it within a flex container, it applies to a flex item.

Summary

The place-self utility in Tailwind CSS is used to set both the align-self and justify-self properties of an item. It can be used to align items within a container both horizontally and vertically. The utility classes for place-self are place-self-start, place-self-end, place-self-center, and place-self-stretch.