Skip to content
Related Articles

Related Articles

Tailwind CSS Align Items
  • Last Updated : 09 Feb, 2021

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 to the beginning of the container.

Syntax:

<element class="items-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 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> 
<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> 
<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> 
<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> 
<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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :