Tailwind CSS Top/Right/Bottom/Left
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:
HTML
<!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:
HTML
<!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:
HTML
<!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.
HTML
<!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.
HTML
<!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
Please Login to comment...