Tailwind CSS Top/Right/Bottom/Left

/ By / Tailwind CSS
Tailwind CSS Top/Right/Bottom/Left

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.

Tailwind CSS Top/Right/Bottom/Left

Utilities for controlling the placement of positioned elements.

ClassProperties
inset-0top: 0px; right: 0px; bottom: 0px; left: 0px;
inset-x-0left: 0px; right: 0px;
inset-y-0top: 0px; bottom: 0px;
top-0top: 0px;
right-0right: 0px;
bottom-0bottom: 0px;
left-0left: 0px;
inset-pxtop: 1px; right: 1px; bottom: 1px; left: 1px;
inset-x-pxleft: 1px; right: 1px;
inset-y-pxtop: 1px; bottom: 1px;
top-pxtop: 1px;
right-pxright: 1px;
bottom-pxbottom: 1px;
left-pxleft: 1px;
inset-0.5top: 0.125rem; /* 2px */ right: 0.125rem; /* 2px */ bottom: 0.125rem; /* 2px */ left: 0.125rem; /* 2px */
inset-x-0.5left: 0.125rem; /* 2px */ right: 0.125rem; /* 2px */
inset-y-0.5top: 0.125rem; /* 2px */ bottom: 0.125rem; /* 2px */
top-0.5top: 0.125rem; /* 2px */
right-0.5right: 0.125rem; /* 2px */
bottom-0.5bottom: 0.125rem; /* 2px */
left-0.5left: 0.125rem; /* 2px */
inset-1top: 0.25rem; /* 4px */ right: 0.25rem; /* 4px */ bottom: 0.25rem; /* 4px */ left: 0.25rem; /* 4px */
inset-x-1left: 0.25rem; /* 4px */ right: 0.25rem; /* 4px */
inset-y-1top: 0.25rem; /* 4px */ bottom: 0.25rem; /* 4px */
top-1top: 0.25rem; /* 4px */
right-1right: 0.25rem; /* 4px */
bottom-1bottom: 0.25rem; /* 4px */
left-1left: 0.25rem; /* 4px */
inset-1.5top: 0.375rem; /* 6px */ right: 0.375rem; /* 6px */ bottom: 0.375rem; /* 6px */ left: 0.375rem; /* 6px */
inset-x-1.5left: 0.375rem; /* 6px */ right: 0.375rem; /* 6px */
inset-y-1.5top: 0.375rem; /* 6px */ bottom: 0.375rem; /* 6px */
top-1.5top: 0.375rem; /* 6px */
right-1.5right: 0.375rem; /* 6px */
bottom-1.5bottom: 0.375rem; /* 6px */
left-1.5left: 0.375rem; /* 6px */
inset-2top: 0.5rem; /* 8px */ right: 0.5rem; /* 8px */ bottom: 0.5rem; /* 8px */ left: 0.5rem; /* 8px */
inset-x-2left: 0.5rem; /* 8px */ right: 0.5rem; /* 8px */
inset-y-2top: 0.5rem; /* 8px */ bottom: 0.5rem; /* 8px */
top-2top: 0.5rem; /* 8px */
right-2right: 0.5rem; /* 8px */
bottom-2bottom: 0.5rem; /* 8px */
left-2left: 0.5rem; /* 8px */
inset-2.5top: 0.625rem; /* 10px */ right: 0.625rem; /* 10px */ bottom: 0.625rem; /* 10px */ left: 0.625rem; /* 10px */
inset-x-2.5left: 0.625rem; /* 10px */ right: 0.625rem; /* 10px */
inset-y-2.5top: 0.625rem; /* 10px */ bottom: 0.625rem; /* 10px */
top-2.5top: 0.625rem; /* 10px */
right-2.5right: 0.625rem; /* 10px */
bottom-2.5bottom: 0.625rem; /* 10px */
left-2.5left: 0.625rem; /* 10px */
inset-3top: 0.75rem; /* 12px */ right: 0.75rem; /* 12px */ bottom: 0.75rem; /* 12px */ left: 0.75rem; /* 12px */
inset-x-3left: 0.75rem; /* 12px */ right: 0.75rem; /* 12px */
inset-y-3top: 0.75rem; /* 12px */ bottom: 0.75rem; /* 12px */
top-3top: 0.75rem; /* 12px */
right-3right: 0.75rem; /* 12px */
bottom-3bottom: 0.75rem; /* 12px */
left-3left: 0.75rem; /* 12px */
inset-3.5top: 0.875rem; /* 14px */ right: 0.875rem; /* 14px */ bottom: 0.875rem; /* 14px */ left: 0.875rem; /* 14px */
inset-x-3.5left: 0.875rem; /* 14px */ right: 0.875rem; /* 14px */
inset-y-3.5top: 0.875rem; /* 14px */ bottom: 0.875rem; /* 14px */
top-3.5top: 0.875rem; /* 14px */
right-3.5right: 0.875rem; /* 14px */
bottom-3.5bottom: 0.875rem; /* 14px */
left-3.5left: 0.875rem; /* 14px */
inset-4top: 1rem; /* 16px */ right: 1rem; /* 16px */ bottom: 1rem; /* 16px */ left: 1rem; /* 16px */
inset-x-4left: 1rem; /* 16px */ right: 1rem; /* 16px */
inset-y-4top: 1rem; /* 16px */ bottom: 1rem; /* 16px */
top-4top: 1rem; /* 16px */
right-4right: 1rem; /* 16px */
bottom-4bottom: 1rem; /* 16px */
left-4left: 1rem; /* 16px */
inset-5top: 1.25rem; /* 20px */ right: 1.25rem; /* 20px */ bottom: 1.25rem; /* 20px */ left: 1.25rem; /* 20px */
inset-x-5left: 1.25rem; /* 20px */ right: 1.25rem; /* 20px */
inset-y-5top: 1.25rem; /* 20px */ bottom: 1.25rem; /* 20px */
top-5top: 1.25rem; /* 20px */
right-5right: 1.25rem; /* 20px */
bottom-5bottom: 1.25rem; /* 20px */
left-5left: 1.25rem; /* 20px */
inset-6top: 1.5rem; /* 24px */ right: 1.5rem; /* 24px */ bottom: 1.5rem; /* 24px */ left: 1.5rem; /* 24px */
inset-x-6left: 1.5rem; /* 24px */ right: 1.5rem; /* 24px */
inset-y-6top: 1.5rem; /* 24px */ bottom: 1.5rem; /* 24px */
top-6top: 1.5rem; /* 24px */
right-6right: 1.5rem; /* 24px */
bottom-6bottom: 1.5rem; /* 24px */
left-6left: 1.5rem; /* 24px */
inset-7top: 1.75rem; /* 28px */ right: 1.75rem; /* 28px */ bottom: 1.75rem; /* 28px */ left: 1.75rem; /* 28px */
inset-x-7left: 1.75rem; /* 28px */ right: 1.75rem; /* 28px */
inset-y-7top: 1.75rem; /* 28px */ bottom: 1.75rem; /* 28px */
top-7top: 1.75rem; /* 28px */
right-7right: 1.75rem; /* 28px */
bottom-7bottom: 1.75rem; /* 28px */
left-7left: 1.75rem; /* 28px */
inset-8top: 2rem; /* 32px */ right: 2rem; /* 32px */ bottom: 2rem; /* 32px */ left: 2rem; /* 32px */
inset-x-8left: 2rem; /* 32px */ right: 2rem; /* 32px */
inset-y-8top: 2rem; /* 32px */ bottom: 2rem; /* 32px */
top-8top: 2rem; /* 32px */
right-8right: 2rem; /* 32px */
bottom-8bottom: 2rem; /* 32px */
left-8left: 2rem; /* 32px */
inset-9top: 2.25rem; /* 36px */ right: 2.25rem; /* 36px */ bottom: 2.25rem; /* 36px */ left: 2.25rem; /* 36px */
inset-x-9left: 2.25rem; /* 36px */ right: 2.25rem; /* 36px */
inset-y-9top: 2.25rem; /* 36px */ bottom: 2.25rem; /* 36px */
top-9top: 2.25rem; /* 36px */
right-9right: 2.25rem; /* 36px */
bottom-9bottom: 2.25rem; /* 36px */
left-9left: 2.25rem; /* 36px */
inset-10top: 2.5rem; /* 40px */ right: 2.5rem; /* 40px */ bottom: 2.5rem; /* 40px */ left: 2.5rem; /* 40px */
inset-x-10left: 2.5rem; /* 40px */ right: 2.5rem; /* 40px */
inset-y-10top: 2.5rem; /* 40px */ bottom: 2.5rem; /* 40px */
top-10top: 2.5rem; /* 40px */
right-10right: 2.5rem; /* 40px */
bottom-10bottom: 2.5rem; /* 40px */
left-10left: 2.5rem; /* 40px */
inset-11top: 2.75rem; /* 44px */ right: 2.75rem; /* 44px */ bottom: 2.75rem; /* 44px */ left: 2.75rem; /* 44px */
inset-x-11left: 2.75rem; /* 44px */ right: 2.75rem; /* 44px */
inset-y-11top: 2.75rem; /* 44px */ bottom: 2.75rem; /* 44px */
top-11top: 2.75rem; /* 44px */
right-11right: 2.75rem; /* 44px */
bottom-11bottom: 2.75rem; /* 44px */
left-11left: 2.75rem; /* 44px */
inset-12top: 3rem; /* 48px */ right: 3rem; /* 48px */ bottom: 3rem; /* 48px */ left: 3rem; /* 48px */
inset-x-12left: 3rem; /* 48px */ right: 3rem; /* 48px */
inset-y-12top: 3rem; /* 48px */ bottom: 3rem; /* 48px */
top-12top: 3rem; /* 48px */
right-12right: 3rem; /* 48px */
bottom-12bottom: 3rem; /* 48px */
left-12left: 3rem; /* 48px */
inset-14top: 3.5rem; /* 56px */ right: 3.5rem; /* 56px */ bottom: 3.5rem; /* 56px */ left: 3.5rem; /* 56px */
inset-x-14left: 3.5rem; /* 56px */ right: 3.5rem; /* 56px */
inset-y-14top: 3.5rem; /* 56px */ bottom: 3.5rem; /* 56px */
top-14top: 3.5rem; /* 56px */
right-14right: 3.5rem; /* 56px */
bottom-14bottom: 3.5rem; /* 56px */
left-14left: 3.5rem; /* 56px */
inset-16top: 4rem; /* 64px */ right: 4rem; /* 64px */ bottom: 4rem; /* 64px */ left: 4rem; /* 64px */
inset-x-16left: 4rem; /* 64px */ right: 4rem; /* 64px */
inset-y-16top: 4rem; /* 64px */ bottom: 4rem; /* 64px */
top-16top: 4rem; /* 64px */
right-16right: 4rem; /* 64px */
bottom-16bottom: 4rem; /* 64px */
left-16left: 4rem; /* 64px */
inset-20top: 5rem; /* 80px */ right: 5rem; /* 80px */ bottom: 5rem; /* 80px */ left: 5rem; /* 80px */
inset-x-20left: 5rem; /* 80px */ right: 5rem; /* 80px */
inset-y-20top: 5rem; /* 80px */ bottom: 5rem; /* 80px */
top-20top: 5rem; /* 80px */
right-20right: 5rem; /* 80px */
bottom-20bottom: 5rem; /* 80px */
left-20left: 5rem; /* 80px */
inset-24top: 6rem; /* 96px */ right: 6rem; /* 96px */ bottom: 6rem; /* 96px */ left: 6rem; /* 96px */
inset-x-24left: 6rem; /* 96px */ right: 6rem; /* 96px */
inset-y-24top: 6rem; /* 96px */ bottom: 6rem; /* 96px */
top-24top: 6rem; /* 96px */
right-24right: 6rem; /* 96px */
bottom-24bottom: 6rem; /* 96px */
left-24left: 6rem; /* 96px */
inset-28top: 7rem; /* 112px */ right: 7rem; /* 112px */ bottom: 7rem; /* 112px */ left: 7rem; /* 112px */
inset-x-28left: 7rem; /* 112px */ right: 7rem; /* 112px */
inset-y-28top: 7rem; /* 112px */ bottom: 7rem; /* 112px */
top-28top: 7rem; /* 112px */
right-28right: 7rem; /* 112px */
bottom-28bottom: 7rem; /* 112px */
left-28left: 7rem; /* 112px */
inset-32top: 8rem; /* 128px */ right: 8rem; /* 128px */ bottom: 8rem; /* 128px */ left: 8rem; /* 128px */
inset-x-32left: 8rem; /* 128px */ right: 8rem; /* 128px */
inset-y-32top: 8rem; /* 128px */ bottom: 8rem; /* 128px */
top-32top: 8rem; /* 128px */
right-32right: 8rem; /* 128px */
bottom-32bottom: 8rem; /* 128px */
left-32left: 8rem; /* 128px */
inset-36top: 9rem; /* 144px */ right: 9rem; /* 144px */ bottom: 9rem; /* 144px */ left: 9rem; /* 144px */
inset-x-36left: 9rem; /* 144px */ right: 9rem; /* 144px */
inset-y-36top: 9rem; /* 144px */ bottom: 9rem; /* 144px */
top-36top: 9rem; /* 144px */
right-36right: 9rem; /* 144px */
bottom-36bottom: 9rem; /* 144px */
left-36left: 9rem; /* 144px */
inset-40top: 10rem; /* 160px */ right: 10rem; /* 160px */ bottom: 10rem; /* 160px */ left: 10rem; /* 160px */
inset-x-40left: 10rem; /* 160px */ right: 10rem; /* 160px */
inset-y-40top: 10rem; /* 160px */ bottom: 10rem; /* 160px */
top-40top: 10rem; /* 160px */
right-40right: 10rem; /* 160px */
bottom-40bottom: 10rem; /* 160px */
left-40left: 10rem; /* 160px */
inset-44top: 11rem; /* 176px */ right: 11rem; /* 176px */ bottom: 11rem; /* 176px */ left: 11rem; /* 176px */
inset-x-44left: 11rem; /* 176px */ right: 11rem; /* 176px */
inset-y-44top: 11rem; /* 176px */ bottom: 11rem; /* 176px */
top-44top: 11rem; /* 176px */
right-44right: 11rem; /* 176px */
bottom-44bottom: 11rem; /* 176px */
left-44left: 11rem; /* 176px */
inset-48top: 12rem; /* 192px */ right: 12rem; /* 192px */ bottom: 12rem; /* 192px */ left: 12rem; /* 192px */
inset-x-48left: 12rem; /* 192px */ right: 12rem; /* 192px */
inset-y-48top: 12rem; /* 192px */ bottom: 12rem; /* 192px */
top-48top: 12rem; /* 192px */
right-48right: 12rem; /* 192px */
bottom-48bottom: 12rem; /* 192px */
left-48left: 12rem; /* 192px */
inset-52top: 13rem; /* 208px */ right: 13rem; /* 208px */ bottom: 13rem; /* 208px */ left: 13rem; /* 208px */
inset-x-52left: 13rem; /* 208px */ right: 13rem; /* 208px */
inset-y-52top: 13rem; /* 208px */ bottom: 13rem; /* 208px */
top-52top: 13rem; /* 208px */
right-52right: 13rem; /* 208px */
bottom-52bottom: 13rem; /* 208px */
left-52left: 13rem; /* 208px */
inset-56top: 14rem; /* 224px */ right: 14rem; /* 224px */ bottom: 14rem; /* 224px */ left: 14rem; /* 224px */
inset-x-56left: 14rem; /* 224px */ right: 14rem; /* 224px */
inset-y-56top: 14rem; /* 224px */ bottom: 14rem; /* 224px */
top-56top: 14rem; /* 224px */
right-56right: 14rem; /* 224px */
bottom-56bottom: 14rem; /* 224px */
left-56left: 14rem; /* 224px */
inset-60top: 15rem; /* 240px */ right: 15rem; /* 240px */ bottom: 15rem; /* 240px */ left: 15rem; /* 240px */
inset-x-60left: 15rem; /* 240px */ right: 15rem; /* 240px */
inset-y-60top: 15rem; /* 240px */ bottom: 15rem; /* 240px */
top-60top: 15rem; /* 240px */
right-60right: 15rem; /* 240px */
bottom-60bottom: 15rem; /* 240px */
left-60left: 15rem; /* 240px */
inset-64top: 16rem; /* 256px */ right: 16rem; /* 256px */ bottom: 16rem; /* 256px */ left: 16rem; /* 256px */
inset-x-64left: 16rem; /* 256px */ right: 16rem; /* 256px */
inset-y-64top: 16rem; /* 256px */ bottom: 16rem; /* 256px */
top-64top: 16rem; /* 256px */
right-64right: 16rem; /* 256px */
bottom-64bottom: 16rem; /* 256px */
left-64left: 16rem; /* 256px */
inset-72top: 18rem; /* 288px */ right: 18rem; /* 288px */ bottom: 18rem; /* 288px */ left: 18rem; /* 288px */
inset-x-72left: 18rem; /* 288px */ right: 18rem; /* 288px */
inset-y-72top: 18rem; /* 288px */ bottom: 18rem; /* 288px */
top-72top: 18rem; /* 288px */
right-72right: 18rem; /* 288px */
bottom-72bottom: 18rem; /* 288px */
left-72left: 18rem; /* 288px */
inset-80top: 20rem; /* 320px */ right: 20rem; /* 320px */ bottom: 20rem; /* 320px */ left: 20rem; /* 320px */
inset-x-80left: 20rem; /* 320px */ right: 20rem; /* 320px */
inset-y-80top: 20rem; /* 320px */ bottom: 20rem; /* 320px */
top-80top: 20rem; /* 320px */
right-80right: 20rem; /* 320px */
bottom-80bottom: 20rem; /* 320px */
left-80left: 20rem; /* 320px */
inset-96top: 24rem; /* 384px */ right: 24rem; /* 384px */ bottom: 24rem; /* 384px */ left: 24rem; /* 384px */
inset-x-96left: 24rem; /* 384px */ right: 24rem; /* 384px */
inset-y-96top: 24rem; /* 384px */ bottom: 24rem; /* 384px */
top-96top: 24rem; /* 384px */
right-96right: 24rem; /* 384px */
bottom-96bottom: 24rem; /* 384px */
left-96left: 24rem; /* 384px */
inset-autotop: auto; right: auto; bottom: auto; left: auto;
inset-1/2top: 50%; right: 50%; bottom: 50%; left: 50%;
inset-1/3top: 33.333333%; right: 33.333333%; bottom: 33.333333%; left: 33.333333%;
inset-2/3top: 66.666667%; right: 66.666667%; bottom: 66.666667%; left: 66.666667%;
inset-1/4top: 25%; right: 25%; bottom: 25%; left: 25%;
inset-2/4top: 50%; right: 50%; bottom: 50%; left: 50%;
inset-3/4top: 75%; right: 75%; bottom: 75%; left: 75%;
inset-fulltop: 100%; right: 100%; bottom: 100%; left: 100%;
inset-x-autoleft: auto; right: auto;
inset-x-1/2left: 50%; right: 50%;
inset-x-1/3left: 33.333333%; right: 33.333333%;
inset-x-2/3left: 66.666667%; right: 66.666667%;
inset-x-1/4left: 25%; right: 25%;
inset-x-2/4left: 50%; right: 50%;
inset-x-3/4left: 75%; right: 75%;
inset-x-fullleft: 100%; right: 100%;
inset-y-autotop: auto; bottom: auto;
inset-y-1/2top: 50%; bottom: 50%;
inset-y-1/3top: 33.333333%; bottom: 33.333333%;
inset-y-2/3top: 66.666667%; bottom: 66.666667%;
inset-y-1/4top: 25%; bottom: 25%;
inset-y-2/4top: 50%; bottom: 50%;
inset-y-3/4top: 75%; bottom: 75%;
inset-y-fulltop: 100%; bottom: 100%;
top-autotop: auto;
top-1/2top: 50%;
top-1/3top: 33.333333%;
top-2/3top: 66.666667%;
top-1/4top: 25%;
top-2/4top: 50%;
top-3/4top: 75%;
top-fulltop: 100%;
right-autoright: auto;
right-1/2right: 50%;
right-1/3right: 33.333333%;
right-2/3right: 66.666667%;
right-1/4right: 25%;
right-2/4right: 50%;
right-3/4right: 75%;
right-fullright: 100%;
bottom-autobottom: auto;
bottom-1/2bottom: 50%;
bottom-1/3bottom: 33.333333%;
bottom-2/3bottom: 66.666667%;
bottom-1/4bottom: 25%;
bottom-2/4bottom: 50%;
bottom-3/4bottom: 75%;
bottom-fullbottom: 100%;
left-autoleft: auto;
left-1/2left: 50%;
left-1/3left: 33.333333%;
left-2/3left: 66.666667%;
left-1/4left: 25%;
left-2/4left: 50%;
left-3/4left: 75%;
left-fullleft: 100%;

Use the {top|right|bottom|left|inset}-{size} utilities to set the horizontal or vertical position of a positioned element.

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.

Example:

<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute left-0 top-0 h-16 w-16 ...">01</div>
</div>

<!-- Span top edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 top-0 h-16 ...">02</div>
</div>

<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute top-0 right-0 h-16 w-16 ...">03</div>
</div>

<!-- Span left edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 left-0 w-16 ...">04</div>
</div>

<!-- Fill entire parent -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-0 ...">05</div>
</div>

<!-- Span right edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 right-0 w-16 ...">06</div>
</div>

<!-- Pin to bottom left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 left-0 h-16 w-16 ...">07</div>
</div>

<!-- Span bottom edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 bottom-0 h-16 ...">08</div>
</div>

<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 right-0 h-16 w-16 ...">09</div>
</div>

Output:

Tailwind CSS Top/Right/Bottom/Left

Leave a Comment

Your email address will not be published. Required fields are marked *