Skip to content
Related Articles

Related Articles

Tailwind CSS Top/Right/Bottom/Left

Improve Article
Save Article
  • Last Updated : 23 Mar, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!