Top / Right / Bottom / Left

Top / Right / Bottom / Left is a set of Tailwind CSS classes for layout. You'll find a comprehensive, complete list of all top / right / bottom / left classes below.

inset-0
inset-x-0
inset-y-0
start-0
end-0
top-0
right-0
bottom-0
left-0
inset-px
inset-x-px
inset-y-px
start-px
end-px
top-px
right-px
bottom-px
left-px
inset-0.5
inset-x-0.5
inset-y-0.5
start-0.5
end-0.5
top-0.5
right-0.5
bottom-0.5
left-0.5
inset-1
inset-x-1
inset-y-1
start-1
end-1
top-1
right-1
bottom-1
left-1
inset-1.5
inset-x-1.5
inset-y-1.5
start-1.5
end-1.5
top-1.5
right-1.5
bottom-1.5
left-1.5
inset-2
inset-x-2
inset-y-2
start-2
end-2
top-2
right-2
bottom-2
left-2
inset-2.5
inset-x-2.5
inset-y-2.5
start-2.5
end-2.5
top-2.5
right-2.5
bottom-2.5
left-2.5
inset-3
inset-x-3
inset-y-3
start-3
end-3
top-3
right-3
bottom-3
left-3
inset-3.5
inset-x-3.5
inset-y-3.5
start-3.5
end-3.5
top-3.5
right-3.5
bottom-3.5
left-3.5
inset-4
inset-x-4
inset-y-4
start-4
end-4
top-4
right-4
bottom-4
left-4
inset-5
inset-x-5
inset-y-5
start-5
end-5
top-5
right-5
bottom-5
left-5
inset-6
inset-x-6
inset-y-6
start-6
end-6
top-6
right-6
bottom-6
left-6
inset-7
inset-x-7
inset-y-7
start-7
end-7
top-7
right-7
bottom-7
left-7
inset-8
inset-x-8
inset-y-8
start-8
end-8
top-8
right-8
bottom-8
left-8
inset-9
inset-x-9
inset-y-9
start-9
end-9
top-9
right-9
bottom-9
left-9
inset-10
inset-x-10
inset-y-10
start-10
end-10
top-10
right-10
bottom-10
left-10
inset-11
inset-x-11
inset-y-11
start-11
end-11
top-11
right-11
bottom-11
left-11
inset-12
inset-x-12
inset-y-12
start-12
end-12
top-12
right-12
bottom-12
left-12
inset-14
inset-x-14
inset-y-14
start-14
end-14
top-14
right-14
bottom-14
left-14
inset-16
inset-x-16
inset-y-16
start-16
end-16
top-16
right-16
bottom-16
left-16
inset-20
inset-x-20
inset-y-20
start-20
end-20
top-20
right-20
bottom-20
left-20
inset-24
inset-x-24
inset-y-24
start-24
end-24
top-24
right-24
bottom-24
left-24
inset-28
inset-x-28
inset-y-28
start-28
end-28
top-28
right-28
bottom-28
left-28
inset-32
inset-x-32
inset-y-32
start-32
end-32
top-32
right-32
bottom-32
left-32
inset-36
inset-x-36
inset-y-36
start-36
end-36
top-36
right-36
bottom-36
left-36
inset-40
inset-x-40
inset-y-40
start-40
end-40
top-40
right-40
bottom-40
left-40
inset-44
inset-x-44
inset-y-44
start-44
end-44
top-44
right-44
bottom-44
left-44
inset-48
inset-x-48
inset-y-48
start-48
end-48
top-48
right-48
bottom-48
left-48
inset-52
inset-x-52
inset-y-52
start-52
end-52
top-52
right-52
bottom-52
left-52
inset-56
inset-x-56
inset-y-56
start-56
end-56
top-56
right-56
bottom-56
left-56
inset-60
inset-x-60
inset-y-60
start-60
end-60
top-60
right-60
bottom-60
left-60
inset-64
inset-x-64
inset-y-64
start-64
end-64
top-64
right-64
bottom-64
left-64
inset-72
inset-x-72
inset-y-72
start-72
end-72
top-72
right-72
bottom-72
left-72
inset-80
inset-x-80
inset-y-80
start-80
end-80
top-80
right-80
bottom-80
left-80
inset-96
inset-x-96
inset-y-96
start-96
end-96
top-96
right-96
bottom-96
left-96
inset-auto
inset-1/2
inset-1/3
inset-2/3
inset-1/4
inset-2/4
inset-3/4
inset-full
inset-x-auto
inset-x-1/2
inset-x-1/3
inset-x-2/3
inset-x-1/4
inset-x-2/4
inset-x-3/4
inset-x-full
inset-y-auto
inset-y-1/2
inset-y-1/3
inset-y-2/3
inset-y-1/4
inset-y-2/4
inset-y-3/4
inset-y-full
start-auto
start-1/2
start-1/3
start-2/3
start-1/4
start-2/4
start-3/4
start-full
end-auto
end-1/2
end-1/3
end-2/3
end-1/4
end-2/4
end-3/4
end-full
top-auto
top-1/2
top-1/3
top-2/3
top-1/4
top-2/4
top-3/4
top-full
right-auto
right-1/2
right-1/3
right-2/3
right-1/4
right-2/4
right-3/4
right-full
bottom-auto
bottom-1/2
bottom-1/3
bottom-2/3
bottom-1/4
bottom-2/4
bottom-3/4
bottom-full
left-auto
left-1/2
left-1/3
left-2/3
left-1/4
left-2/4
left-3/4
left-full

Top / Right / Bottom / Left

Want to learn more about Tailwind CSS? Join the Tailscan email list!