Open In App
Related Articles

Tailwind CSS Top/Right/Bottom/Left

Improve Article
Improve
Save Article
Save
Like Article
Like

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


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials