Open In App

Tailwind CSS Align Items

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

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:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads