Offset positioned elements with top-*, right-*, bottom-*, left-*, inset-* and the x/y shorthands — including negatives. This family contains 595 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
inset-0 | inset: 0px; |
-inset-0 | inset: -0px; |
inset-1 | inset: 0.25rem; |
-inset-1 | inset: -0.25rem; |
inset-2 | inset: 0.5rem; |
-inset-2 | inset: -0.5rem; |
inset-3 | inset: 0.75rem; |
-inset-3 | inset: -0.75rem; |
inset-4 | inset: 1rem; |
-inset-4 | inset: -1rem; |
inset-5 | inset: 1.25rem; |
-inset-5 | inset: -1.25rem; |
inset-6 | inset: 1.5rem; |
-inset-6 | inset: -1.5rem; |
inset-7 | inset: 1.75rem; |
-inset-7 | inset: -1.75rem; |
inset-8 | inset: 2rem; |
-inset-8 | inset: -2rem; |
inset-9 | inset: 2.25rem; |
-inset-9 | inset: -2.25rem; |
inset-10 | inset: 2.5rem; |
-inset-10 | inset: -2.5rem; |
inset-11 | inset: 2.75rem; |
-inset-11 | inset: -2.75rem; |
inset-12 | inset: 3rem; |
-inset-12 | inset: -3rem; |
inset-14 | inset: 3.5rem; |
-inset-14 | inset: -3.5rem; |
inset-16 | inset: 4rem; |
-inset-16 | inset: -4rem; |
inset-20 | inset: 5rem; |
-inset-20 | inset: -5rem; |
inset-24 | inset: 6rem; |
-inset-24 | inset: -6rem; |
inset-28 | inset: 7rem; |
-inset-28 | inset: -7rem; |
inset-32 | inset: 8rem; |
-inset-32 | inset: -8rem; |
inset-36 | inset: 9rem; |
-inset-36 | inset: -9rem; |
inset-40 | inset: 10rem; |
-inset-40 | inset: -10rem; |
inset-44 | inset: 11rem; |
-inset-44 | inset: -11rem; |
inset-48 | inset: 12rem; |
-inset-48 | inset: -12rem; |
inset-52 | inset: 13rem; |
-inset-52 | inset: -13rem; |
inset-56 | inset: 14rem; |
-inset-56 | inset: -14rem; |
inset-60 | inset: 15rem; |
-inset-60 | inset: -15rem; |
inset-64 | inset: 16rem; |
-inset-64 | inset: -16rem; |
inset-72 | inset: 18rem; |
-inset-72 | inset: -18rem; |
inset-80 | inset: 20rem; |
-inset-80 | inset: -20rem; |
inset-96 | inset: 24rem; |
-inset-96 | inset: -24rem; |
…and 535 more in this family — search by class name to find the exact one.
Example#
example
<button class="absolute -top-2 -right-2 h-5 w-5 rounded-full bg-red-500 text-xs text-white">3</button>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
inset-0pins an element to all four edges — perfect overlays- Negative insets (
-top-4) build badges, close buttons and overlaps
Common mistakes#
- Inset utilities do nothing on
staticelements — set position first
Related#
utilities/spacing/margin|Margin · utilities/sizing/width|Width · responsive/index|Responsive