Tailwind CSS Align Self - Coding

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

Example:

HTML

<!DOCTYPE html> 
<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> 
<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> 
<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> 
<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:

Elevate your coding journey with a Premium subscription. Benefit from ad-free learning, unlimited article summaries, an AI bot, access to 35+ courses, and more-available only with GeeksforGeeks Premium! Explore now!

Reffered: https://www.geeksforgeeks.org

Tailwind CSS

Related
Tailwind CSS Align Items
Tailwind CSS Align Content
Tailwind CSS Display

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	13