Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Top/Right/Bottom/Left

  • Last Updated : 21 May, 2021

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
Recommended Articles
Page :