Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Align Self

  • Last Updated : 09 Feb, 2021

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
                          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-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
                          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-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
                          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-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
                          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-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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :