- Layout
- top / right / bottom / left
Layout
top / right / bottom / left
Utilities for controlling the placement of positioned elements.
| Class | Styles |
|---|---|
inset-<number> | inset: calc(var(--spacing) * <number>); |
inset-<fraction> | inset: calc(<fraction> * 100%); |
inset-px | inset: 1px; |
inset-auto | inset: auto; |
inset-full | inset: 100%; |
inset-x-<number> | inset-inline: calc(var(--spacing) * <number>); |
inset-x-<fraction> | inset-inline: calc(<fraction> * 100%); |
inset-x-px | inset-inline: 1px |
inset-x-full | inset-inline: calc(var(--spacing) * 0); |
inset-y-<number> | inset-block: calc(var(--spacing) * <number>); |
inset-y-<fraction> | inset-block: calc(<fraction> * 100%); |
inset-y-full | inset-block: 100%; |
inset-y-px | inset-block: 1px |
start-<number> | inset-inline-start: calc(var(--spacing) * <number>); |
start-<fraction> | inset-inline-start: calc(<fraction> * 100%) |
start-full | inset-inline-start: 100%; |
start-px | inset-inline-start: 1px; |
end-<number> | inset-inline-end: calc(var(--spacing) * <number>); |
end-<fraction> | inset-inline-end: calc(<fraction> * 100%) |
end-full | inset-inline-end: 100%; |
end-px | inset-inline-end: 1px; |
top-<number> | top: calc(var(--spacing) * <number>); |
top-<fraction> | top: calc(<fraction> * 100%); |
top-full | top: 100%; |
top-px | top: 1px; |
right-<number> | right: calc(var(--spacing) * <number>); |
right-<fraction> | right: calc(<fraction> * 100%); |
right-full | right: 100%; |
right-px | right: 1px; |
bottom-<number> | bottom: calc(var(--spacing) * <number>); |
bottom-<fraction> | bottom:calc(<fraction> * 100%); |
bottom-full | bottom: 100%; |
bottom-px | bottom: 1px; |
left-<number> | left: calc(var(--spacing) * <number>); |
left-<fraction> | left: calc(<fraction> * 100%); |
left-full | left: 100%; |
left-px | left: 1px; |
inset-(<custom-property>) | inset: var(<custom-property>); |
inset-[<value>] | inset: <value>; |
Examples
Placing a positioned element
Use the top-*, right-*, bottom-*, left-*, and inset-* utilities to set the horizontal or vertical position of a positioned element:
01
02
03
04
05
06
07
08
09
<!-- Pin to top left corner --><div className="relative size-32 ..."> <div className="absolute top-0 left-0 size-16 ...">01</div></div><!-- Span top edge --><div className="relative size-32 ..."> <div className="absolute inset-x-0 top-0 h-16 ...">02</div></div><!-- Pin to top right corner --><div className="relative size-32 ..."> <div className="absolute top-0 right-0 size-16 ...">03</div></div><!-- Span left edge --><div className="relative size-32 ..."> <div className="absolute inset-y-0 left-0 w-16 ...">04</div></div><!-- Fill entire parent --><div className="relative size-32 ..."> <div className="absolute inset-0 ...">05</div></div><!-- Span right edge --><div className="relative size-32 ..."> <div className="absolute inset-y-0 right-0 w-16 ...">06</div></div><!-- Pin to bottom left corner --><div className="relative size-32 ..."> <div className="absolute bottom-0 left-0 size-16 ...">07</div></div><!-- Span bottom edge --><div className="relative size-32 ..."> <div className="absolute inset-x-0 bottom-0 h-16 ...">08</div></div><!-- Pin to bottom right corner --><div className="relative size-32 ..."> <div className="absolute right-0 bottom-0 size-16 ...">09</div></div>Using negative values
To use a negative top/right/bottom/left value, prefix the class name with a dash to convert it to a negative value:
<div class="relative size-32 ..."> <div class="absolute -top-4 -left-4 size-14 ..."></div></div>Using logical properties
Use the start-* and end-* utilities to set the inset-inline-start and inset-inline-end logical properties, which map to either the left or right side based on the text direction:
Left-to-right
Right-to-left
<div dir="ltr"> <div class="relative size-32 ..."> <div class="absolute start-0 top-0 size-14 ..."></div> </div> <div> <div dir="rtl"> <div class="relative size-32 ..."> <div class="absolute start-0 top-0 size-14 ..."></div> </div> <div></div> </div> </div></div>For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.
Referencing a variable
Use the inset-(<custom-property>) syntax to set the inset based on a custom property:
<div class="inset-(--my-inset) ..."> <!-- ... --></div>Using a custom value
Use the inset-[<value>] syntax to set the inset based on a completely custom value:
<div class="inset-[3px] ..."> <!-- ... --></div>Responsive design
Prefix an inset utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="top-4 md:top-6"> <!-- ... --></div>Learn more about using variants in the variants documentation.
Customizing your theme
Use the --inset-* theme variables to customize the inset utilities in your project:
@theme { --inset-3px: 3px; }Now the inset-3px utility can be used in your markup:
<div class="inset-3px"> <!-- ... --></div>Learn more about customizing your theme in the theme documentation.
