Tailwind CSS Top / Right / Bottom / Left
In tailwind CSS, these classes take a variety of values and cover all of the characteristics in the class form. These are the CSS Top/Right/Bottom/Left properties' replacements. These classes are used to determine how a positioned element is aligned. Remember that these properties can only be applied to positioned elements.
Top/Right/Bottom/Left classes
The various types of Top/Right/Bottom/Left classes are listed below:
- .inset-0
- .inset-y-0
- .inset-x-0
- .top-0
- .right-0
- .bottom-0
- .left-0
- In Tailwind, the top/right/bottom/left/inset utilities have default values of 0 and auto.
-
- You can replace "0" with any of the allowed "rem" values.
inset-0
It's used to provide the top/right/bottom/left properties of an element a 0px value.
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-red-600 font-bold m-4"> <h1 class="text-3xl my-4" > Tutorial and Example</h1> <p class=" text-2xl">Tailwind CSS Top/Right/Bottom/Left</p> </div> <div class="relative h-24 w-24 bg-red-400 m-4"> <div class="absolute inset-0 bg-red-800"></div> </div> </body> </html>
Output:
inset-y-0
It's used to give the element's top and bottom properties a value of 0px.
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-red-600 font-bold m-4"> <h1 class="text-3xl my-4" > Tutorial and Example</h1> <p class=" text-2xl">Tailwind CSS Top/Right/Bottom/Left</p> </div> <div class="relative h-28 w-28 bg-red-400 m-4"> <div class="absolute inset-y-0 w-16 bg-red-800"> </div> </div> </body> </html>
Output:
inset-x-0
It's used to give the element's right and left properties a value of 0px.
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-red-600 font-bold m-4"> <h1 class="text-3xl my-4" > Tutorial and Example</h1> <p class=" text-2xl">Tailwind CSS Top/Right/Bottom/Left</p> </div> <div class="relative h-28 w-28 bg-red-400 m-4"> <div class="absolute inset-x-0 h-9 bg-red-800"> </div> </div> </body> </html>
Output:
top-0
It's used to give the element's top property the value 0px.
Syntax:
<element class="top-0">...</element>
left-0
It's used to give the element's left property the value 0px.
Syntax:
<element class="left-0">...</element>
The left-0 and top-0 classes are used in this example.
Example:
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="text-red-600 font-bold m-4"> <h1 class="text-3xl my-4" > Tutorial and Example </h1> <p class=" text-2xl">Tailwind CSS Top/Right/Bottom/Left</p> </div> <div class="relative h-36 w-36 bg-red-400 m-4"> <div class="absolute left-0 top-0 w-16 h-16 bg-red-800"> </div> </div> </body> </html>
Output:
right-0
It's used to give the element's right property the value 0px.
Syntax:
<element class="right-0">...</element>
bottom-0
It's used to give the element's bottom property the value 0px.
Syntax:
<element class="bottom-0">...</element>
The right-0 and bottom-0 classes are used in this example.
Example:
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="text-red-600 font-bold m-4"> <h1 class="text-3xl my-4" >Tutorial and Example</h1> <p class=" text-2xl">Tailwind CSS Top/Right/Bottom/Left</p> </div> <div class="relative h-36 w-36 bg-red-400 m-4"> <div class="absolute right-0 bottom-0 w-16 h-16 bg-red-800"> </div> </div> </body> </html>
Output:
