These classes accept many values in tailwind CSS in which all the properties are covered in class form. These are the alternative to the CSS Top/Right/Bottom/Left properties. These classes are used to control the alignment of a positioned element. Remember we can use these properties only with positioned elements.
Top/Right/Bottom/Left classes:
- .inset-0
- .inset-y-0
- .inset-x-0
- .top-0
- .right-0
- .bottom-0
- .left-0
The default value of top/right/bottom/left/inset utilities in Tailwind is 0 and auto.
Note: You can change the number “0” with the valid “rem” values.
inset-0: It is used to provide 0px value to top/right/bottom/left properties of element.
Syntax:
<element class="inset-0">...</element>
Example:
<!DOCTYPE html> <html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="text-green-600 font-bold m-4">
<h1 class="text-3xl my-4" >GeeksforGeeks</h1>
<p class=" text-2xl">Top/Right/Bottom/Left</p>
</div>
<div class="relative h-24 w-24 bg-green-400 m-4">
<div class="absolute inset-0 bg-green-800"></div>
</div>
</body>
</html>
|
Output:
inset-0
inset-y-0: It is used to provide value 0px to the top and bottom property of the element.
Syntax:
<element class="inset-y-0">...</element>
Example:
<!DOCTYPE html> <html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="text-green-600 font-bold m-4">
<h1 class="text-3xl my-4" >GeeksforGeeks</h1>
<p class=" text-2xl">Top/Right/Bottom/Left</p>
</div>
<div class="relative h-28 w-28 bg-green-400 m-4">
<div class="absolute inset-y-0
w-16 bg-green-800">
</div>
</div>
</body>
</html>
|
Output:
inset-y-0
inset-x-0: It is used to provide value 0px to the right and left property of the element.
Syntax:
<element class="inset-x-0">...</element>
Example:
<!DOCTYPE html> <html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="text-green-600 font-bold m-4">
<h1 class="text-3xl my-4" >GeeksforGeeks</h1>
<p class=" text-2xl">Top/Right/Bottom/Left</p>
</div>
<div class="relative h-28 w-28 bg-green-400 m-4">
<div class="absolute inset-x-0
h-9 bg-green-800">
</div>
</div>
</body>
</html>
|
Output:
inset-x-0
top-0: It is used to provide value 0px to the top property of the element.
Syntax:
<element class="top-0">...</element>
left-0: It is used to provide value 0px to the left property of the element.
Syntax:
<element class="left-0">...</element>
Example: In this example, we are using the left-0 and top-0 classes.
<!DOCTYPE html> <html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="text-green-600 font-bold m-4">
<h1 class="text-3xl my-4" >GeeksforGeeks</h1>
<p class=" text-2xl">Top/Right/Bottom/Left</p>
</div>
<div class="relative h-36 w-36 bg-green-400 m-4">
<div class="absolute left-0 top-0
w-16 h-16 bg-green-800">
</div>
</div>
</body>
</html>
|
Output:
left-0 top-0
right-0: It is used to provide value 0px to the right property of the element.
Syntax:
<element class="right-0">...</element>
bottom-0: It is used to provide value 0px to the bottom property of the element.
Syntax:
<element class="bottom-0">...</element>
Example: In this example, we are using the right-0 and bottom-0 classes.
<!DOCTYPE html> <html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="text-green-600 font-bold m-4">
<h1 class="text-3xl my-4" >GeeksforGeeks</h1>
<p class=" text-2xl">Top/Right/Bottom/Left</p>
</div>
<div class="relative h-36 w-36 bg-green-400 m-4">
<div class="absolute right-0 bottom-0
w-16 h-16 bg-green-800">
</div>
</div>
</body>
</html>
|
Output:
right-0 bottom-0