Horje
Tailwind CSS Align Items

This class accepts a lot of values in tailwind CSS. It is the alternative to the CSS Align Items property. This class is used to set the alignment of items inside the flexible container or in the given window. It aligns the flex Items across the axis. The align-self class is used to override the align-items class.

Align Items Classes:

  • items-start 
  • items-end 
  • items-center 
  • items-baseline 
  • items-stretch 

items-start

Items will be positioned at the beginning of the container.

Syntax:

<element class="items-start">...</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 Items Class</b> 
    <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex
                          items-start
                          bg-green-200 border-solid border-4 
                          border-green-900"> 
        <div class="bg-green-900 rounded-lg py-4 w-32">1</div> 
        <div class="bg-green-800 rounded-lg py-12 w-32">2</div> 
        <div class="bg-green-700 rounded-lg py-8 w-32">3</div> 
    </div> 
</body> 

</html>

Output:

items-end

Items will be positioned to the end of the container.

Syntax:

<element class="items-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 Items Class</b> 
    <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex
                          items-end
                          bg-green-200 border-solid border-4 
                          border-green-900"> 
        <div class="bg-green-900 rounded-lg py-4 w-32">1</div> 
        <div class="bg-green-800 rounded-lg py-12 w-32">2</div> 
        <div class="bg-green-700 rounded-lg py-8 w-32">3</div> 
    </div> 
</body> 

</html>

Output:

items-center

The position of items should be the center of the container vertically.

Syntax:

<element class="items-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 Items Class</b> 
    <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex
                          items-center
                          bg-green-200 border-solid border-4 
                          border-green-900"> 
        <div class="bg-green-900 rounded-lg py-4 w-32">1</div> 
        <div class="bg-green-800 rounded-lg py-12 w-32">2</div> 
        <div class="bg-green-700 rounded-lg py-8 w-32">3</div> 
    </div> 
</body> 

</html>

Output:

items-baseline

Items will be positioned to the baseline of the container.

Syntax:

<element class="items-baseline">...</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 Items Class</b> 
    <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex
                          items-baseline
                          bg-green-200 border-solid border-4 
                          border-green-900"> 
        <div class="bg-green-900 rounded-lg py-4 w-32">1</div> 
        <div class="bg-green-800 rounded-lg py-12 w-32">2</div> 
        <div class="bg-green-700 rounded-lg py-8 w-32">3</div> 
    </div> 
</body> 

</html>

Output:

items-stretch

Items are stretched to fit the container and it is the default value.

Syntax:

<element class="items-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 Items Class</b> 
    <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex
                          items-stretch
                          bg-green-200 border-solid border-4 
                          border-green-900"> 
        <div class="bg-green-900 rounded-lg py-4 w-32">1</div> 
        <div class="bg-green-800 rounded-lg py-12 w-32">2</div> 
        <div class="bg-green-700 rounded-lg py-8 w-32">3</div> 
    </div> 
</body> 

</html>

Output:


 


Reffered: https://www.geeksforgeeks.org

Tailwind CSS

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

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



 

Horje