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