Utilities for the placement of positioned elements.
Top
Using top-[*], you can control the vertical position of a positioned element
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.
For example, "top-5" will give you 1.25rem offset from top.
To use negative values simply add a "-" before the utility name,
such as "-top-4".
You can use Arbitrary values like "top-(16px)" or "top-(2em)" as well.
Learn more about Arbitrary Styling
Right
Using right-[*], you can control the horizontal position of a positioned element
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.
For example, "right-5" will give you 1.25rem offset from right.
To use negative values simply add a "-" before the utility name,
such as "-right-4".
You can use Arbitrary values like "right-(16px)" or "right-(2em)" as well.
Learn more about Arbitrary Styling
Bottom
Using bottom-[*], you can control the vertical position of a positioned element
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.
For example, "bottom-5" will give you 1.25rem offset from bottom.
To use negative values simply add a "-" before the utility name,
such as "-bottom-4".
You can use Arbitrary values like "bottom-(16px)" or "bottom-(2em)" as well.
Learn more about Arbitrary Styling
Left
Using left-[*], you can control the horizontal position of a positioned element
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.
For example, "left-5" will give you 1.25rem offset from left.
To use negative values simply add a "-" before the utility name,
such as "-left-4".
You can use Arbitrary values like "left-(16px)" or "left-(2em)" as well.
Learn more about Arbitrary Styling
Inset
Using inset-[*], you can control the vertical and horzontal position of a positioned element.
inset-x: shorthand for right/left
inset-y: shorthand for top/bottom
inset: shorthand for top/right/bottom/left
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.
You can use Arbitrary values like "inset-x-(16px)" or "inset-(2em)" as well.
Learn more about Arbitrary Styling