Tailwind CSS - Top/Right/Bottom/Left

Previous
Next

Tailwind CSS Top/Right/Bottom/Left is a utility class that helps us align the positioned elements. These properties will work only on positioned elements.

Tailwind CSS Top/Right/Bottom/Left Classes

The following is the list of Tailwind CSS Top/Right/Bottom/Left Classes that provides an effective way of placing positioned elements.

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

Functionality of Tailwind CSS Individual Sides Classes

  • inset-0: This class replaces CSS inset: 0px; property. This class applies all four properties(top,right,bottom,left) simultaneously and setting them to 0.
  • inset-x-*: This class applies left and right properties together placing the positioned element horizontally.
  • inset-y-*: This class applies top and bottom properties together placing the positioned element vertically.
  • start-*: This class replaces CSS inset-inline-start: *px; property. This class positions elements at the starting edge of its container depending on the direction of the text or writing mode.
  • end-*: This class replaces CSS inset-inline-end: *px; property. This class positions elements at the ending edge of its container depending on the direction of the text or writing mode.
  • top-*: This class replaces CSS top: *px; property. This class is used to position elements at the top edge of its container.
  • right-*: This class replaces CSS right: *px; property. This class is used to position elements at the right edge of its container .
  • bottom-*: This class replaces CSS bottom: *px; property. This class is used to position elements at the bottom edge of its container.
  • left-*: This class replaces the CSS left: *px; property. This class is used to position elements at the left edge of its container.

Tailwind CSS Individual Sides Class Examples

The following examples will illustrate the Tailwind CSS Top/Right/Bottom/Left class utility.

Tailwind CSS Inset-0 Class

The below example is illustrating the use of Tailwind CSS inset-0 Class.

Example

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h1 class="text-3xl">
        Tailwind CSS Inset-0 Class
    </h1>
    <div class="relative h-28 w-28 bg-lime-300 m-4">
        <div class="absolute inset-0 bg-lime-700"></div>
    </div>
</body>

</html>

Tailwind CSS Inset-x-0 Class

The below example is illustrating the use of Tailwind CSS inset-x-0 Class.

Example

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h1 class="text-3xl">
        Tailwind CSS Inset-x-0 Class
    </h1>
    <div class="relative h-28 w-28 bg-lime-300 m-4">
        <div class="absolute inset-x-0 h-9 bg-lime-700"></div>
    </div>
    <p>
        Inset-x-* class applies left and right 
        properties together placing the positioned 
        element horizontally. (*) symbol indicating 
        the size value as per your need.
    </p>
</body>

</html>

Tailwind CSS Inset-y-0 Class

The below example is illustrating the use of Tailwind CSS inset-y-0 Class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h1 class="text-3xl">
        Tailwind CSS Inset-y-0 Class
    </h1>
    <div class="relative h-28 w-28 bg-lime-300 m-4">
        <div class="absolute inset-y-0 w-9 bg-lime-700"></div>
    </div>
    <p>
        Inset-y-* class applies top and bottom 
        properties together placing the positioned
        element vertically. (*) symbol indicating
        the size value as per your need.
    </p>
</body>
</html>

Tailwind CSS Start-0 & End-0 Class

The below example is illustrating the use of Tailwind CSS Start-0 & End-0 Classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h1 class="text-3xl">
        Tailwind CSS Start-0 Class
    </h1>
    <div class="relative h-28 w-28 
                bg-lime-300 m-4">
        <div class="absolute start-0 
                    w-9 h-9 bg-lime-700"></div>
    </div>
    <p>
        Start-* class positions elements at the 
        starting edge of its container depending 
        on the direction of the text or writing mode.
        (*) symbol indicating the size value as per 
        your need.
    </p>
    
    <h1 class="text-3xl mt-2">
        Tailwind CSS End-0 Class
    </h1>
    <div class="relative bg-lime-300 
                h-28 w-28 m-4">
        <div class="absolute end-0 
                    w-9 h-9 bg-lime-700"></div>
    </div>
    <p>
        End-* class positions elements at the 
        ending edge of its container depending 
        on the direction of the text or writing
        mode. (*) symbol indicating the size 
        value as per your need.
    </p>
</body>
</html>

Tailwind CSS Top-0 & Bottom-0 Class

The below example is illustrating the use of Tailwind CSS Top-0 & Bottom-0 Classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h1 class="text-3xl">
        Tailwind CSS Top-0 Class
    </h1>
    <div class="relative h-28 w-28 
                bg-lime-300 m-4">
        <div class="absolute top-0 
                    w-9 h-9 bg-lime-700"></div>
    </div>
    <p>
        Top-* class is used to position elements 
        at the top edge of its container. (*) 
        symbol indicating the size value as per 
        your need.
    </p>
    
    <h1 class="text-3xl mt-2">
        Tailwind CSS Bottom-0 Class
    </h1>
    <div class="relative bg-lime-300 
                h-28 w-28 m-4">
        <div class="absolute bottom-0 
                    w-9 h-9 bg-lime-700"></div>
    </div>
    <p>
        Bottom-* class is used to position elements
        at the bottom edge of its container. (*) 
        symbol indicating the size value as per 
        your need.
    </p>
</body>
</html>

Tailwind CSS Right-0 & Left-0 Class

The below example is illustrating the use of Tailwind CSS Right-0 & Left-0 Classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h1 class="text-3xl">
        Tailwind CSS Right-0 Class
    </h1>
    <div class="relative h-28 w-28 
                bg-lime-300 m-4">
        <div class="absolute right-0 
                    w-9 h-9 bg-lime-700"></div>
    </div>
    <p>
        Right-* class is used to position elements
        at the right edge of its container. (*) 
        symbol indicating the size value as per
        your need.
    </p>
    
    <h1 class="text-3xl mt-2">
        Tailwind CSS Left-0 Class
    </h1>
    <div class="relative bg-lime-300 
                h-28 w-28 m-4">
        <div class="absolute left-0 
                    w-9 h-9 bg-lime-700"></div>
    </div>
    <p>
        Bottom-* class is used to position elements
        at the left edge of its container. (*) symbol
        indicating the size value as per your need.
    </p>
</body>
</html>
Print Page
Previous
Next
Advertisements