Open In App

Tailwind CSS Align Self

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts lots of values in tailwind CSS. It is the alternative to the CSS Align Self property. This class is used to control how an individual flex or grid item is positioned along its container’s cross axis.

Align Self Classes:

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

self-auto: This class is used to inherit its parent container align-items property or stretched if it has no parent container. It is a default value.

Syntax:

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

Example:

HTML




<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Align Self Class</b>
    <div id="main" class="p-2 justify-around ml-32 h-48 w-2/3 flex
                          iitems-stretch
                          bg-green-200 border-solid border-4
                          border-green-900">
        <div class="bg-green-900 rounded-lg w-32">1</div>
        <div class="self-auto bg-green-800 rounded-lg  w-32">2</div>
        <div class="bg-green-700 rounded-lg w-32">3</div>
    </div>
</body>
 
</html>


Output:

self-start: This class is used to align the selected item at the beginning of the flexible container.

Syntax:

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

Example:

HTML




<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Align Self Class</b>
    <div id="main" class="p-2 justify-around ml-32 h-48 w-2/3 flex
                          items-stretch
                          bg-green-200 border-solid border-4
                          border-green-900">
        <div class="bg-green-900 rounded-lg w-32">1</div>
        <div class="self-start bg-green-800 rounded-lg  w-32">2</div>
        <div class="bg-green-700 rounded-lg w-32">3</div>
    </div>
</body>
 
</html>


Output:

self-end: This class is used to align the selected item at the end of the flexible container.

Syntax:

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

Example: 

HTML




<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Align Self Class</b>
    <div id="main" class="p-2 justify-around ml-32 h-48 w-2/3 flex
                          items-stretch
                          bg-green-200 border-solid border-4
                          border-green-900">
        <div class="bg-green-900 rounded-lg w-32">1</div>
        <div class="self-end bg-green-800 rounded-lg  w-32">2</div>
        <div class="bg-green-700 rounded-lg w-32">3</div>
    </div>
</body>
 
</html>


Output:

self-center: This class is used to place the item at the center of the flexible container.

Syntax:

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

Example:

HTML




<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Align Self Class</b>
    <div id="main" class="p-2 justify-around ml-32 h-48 w-2/3 flex
                          items-stretch
                          bg-green-200 border-solid border-4
                          border-green-900">
        <div class="bg-green-900 rounded-lg w-32">1</div>
        <div class="self-center bg-green-800 rounded-lg  w-32">2</div>
        <div class="bg-green-700 rounded-lg w-32">3</div>
    </div>
</body>
 
</html>


Output:

self-stretch: This class is used to position the elements to fit the container.

Syntax:

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

Example: 

HTML




<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Align Self Class</b>
    <div id="main" class="p-2 justify-around ml-32 h-48 w-2/3 flex
                          items-stretch
                          bg-green-200 border-solid border-4
                          border-green-900">
        <div class="bg-green-900 rounded-lg w-32">1</div>
        <div class="self-stretch bg-green-800 rounded-lg  w-32">2</div>
        <div class="bg-green-700 rounded-lg w-32">3</div>
    </div>
</body>
 
</html>


Output:



Last Updated : 19 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads