Open In App

Tailwind CSS Top/Right/Bottom/Left

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads