The Align Self utilities in Tailwind CSS are used to control how an individual flex or grid item is aligned along its container's cross axis. They are the Tailwind CSS alternatives to the CSS align-self property.
Tailwind CSS provides the following utilities for the align-self property:
- self-auto
- self-start
- self-end
- self-center
- self-stretch
1. self-auto
The self-auto utility allows the item to follow the align-items value of its parent container. It is the default value of the align-self property.
Syntax:
<element class="self-auto">...</element>
Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Align Self</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Align Self Class</b>
<div class="mx-auto mt-4 flex h-48 w-2/3 items-stretch justify-around
bg-green-200 border-4 border-green-900 p-2">
<div class="w-32 rounded-lg bg-green-900">1</div>
<div class="self-auto w-32 rounded-lg bg-green-800">2</div>
<div class="w-32 rounded-lg bg-green-700">3</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
2. self-start
The self-start utility aligns the selected item toward the start of the container's cross axis.
Syntax:
<element class="self-start">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Align Self</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Align Self Class</b>
<div class="mx-auto mt-4 flex h-48 w-2/3 items-stretch justify-around
bg-green-200 border-4 border-green-900 p-2">
<div class="w-32 rounded-lg bg-green-900">1</div>
<div class="self-start w-32 rounded-lg bg-green-800">2</div>
<div class="w-32 rounded-lg bg-green-700">3</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
3. self-end
The self-end utility aligns the selected item toward the end of the container's cross axis.
Syntax:
<element class="self-end">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Align Self</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Align Self Class</b>
<div class="mx-auto mt-4 flex h-48 w-2/3 items-stretch justify-around
bg-green-200 border-4 border-green-900 p-2">
<div class="w-32 rounded-lg bg-green-900">1</div>
<div class="self-end w-32 rounded-lg bg-green-800">2</div>
<div class="w-32 rounded-lg bg-green-700">3</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
4. self-center
The self-center utility aligns the selected item at the center of the container's cross axis.
Syntax:
<element class="self-center">...</element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Align Self</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Align Self Class</b>
<div class="mx-auto mt-4 flex h-48 w-2/3 items-stretch justify-around
bg-green-200 border-4 border-green-900 p-2">
<div class="w-32 rounded-lg bg-green-900">1</div>
<div class="self-center w-32 rounded-lg bg-green-800">2</div>
<div class="w-32 rounded-lg bg-green-700">3</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
5. self-stretch
The self-stretch utility stretches the selected item to fill the available space along the container's cross axis.
Syntax:
<element class="self-stretch">...</element>
Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Align Self</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Align Self Class</b>
<div class="mx-auto mt-4 flex h-48 w-2/3 items-start justify-around
bg-green-200 border-4 border-green-900 p-2">
<div class="w-32 rounded-lg bg-green-900">1</div>
<div class="self-stretch w-32 rounded-lg bg-green-800">2</div>
<div class="w-32 rounded-lg bg-green-700">3</div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->