Tailwind CSS Top/Right/Bottom/Left

23 Mar, 2022
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
Picked
Tailwind CSS
Tailwind-Layout
CSS
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?