Tailwind CSS - Place Self

Previous
Quiz
Next

Tailwind CSS Place Self is a utility class used to justify and align individual items simultaneously.

Tailwind CSS Place Self Classes

The following is the list of Tailwind CSS Place Self Classes that help in the effective alignment of flex and grid items.

Class CSS Properties
place-self-auto place-self: auto;
place-self-start place-self: start;
place-self-end place-self: end;
place-self-center place-self: center;
place-self-stretch place-self: stretch;

Functionality of Tailwind CSS Place Self Classes

  • place-self-auto: This class replaces the CSS place-self: auto; property. This class is used to place individual items based on the value of their parent container's place-items property.
  • place-self-start: This class replaces the CSS place-self: start; property. This class is used to place individual items at the start of their flex and grid areas on both axes.
  • place-self-end: This class replaces the CSS place-self: end; property. This class is used to place individual items at the end of their flex and grid areas on both axes.
  • place-self-center: This class replaces the CSS place-self: center; property. This class is used to place individual items at the center of their flex and grid areas on both axes.
  • place-self-stretch: This class replaces the CSS place-self: stretch; property. This class is used to stretch flex and grid items along both axes in order to fill the available space.

Tailwind CSS Place Self Classes Examples

The following examples will illustrate the Tailwind CSS Place Self class utility.

Grid Items Auto alignment

The place-self-auto class sets individual items to be positioned at the start of their flex and grid areas on both axes., as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Place Self Auto Class
    </h2>
    <div class="border-2 border-green-500 grid
                place-items-start bg-green-300
                h-44 w-1/2 p-1 ">        
    <!-- The place-self-auto class is used to place
            an individual items based on the value of their
            parent container's place-items property. -->        
        <div class="bg-orange-500 p-4 place-self-auto">
            Item 1
        </div>
    </div>
</body>

</html>

Grid Items Start alignment

The place-self-start class sets individual items to be positioned at the start based on the value of their parent container's place-items property, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
        <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Place Self Start Class
    </h2>
    <div class="border-2 border-green-500 grid
                place-items-start bg-green-300
                h-44 w-1/2 p-1 ">        
    <!-- The place-self-start class is used to place 
            an individual items at the start of their flex
            and grid areas on both axes-->        
        <div class="bg-orange-500 p-4 place-self-start">
            Item 1
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next