Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/toolwind/anchors/llms.txt

Use this file to discover all available pages before exploring further.

The {property}-anchor-{side} utilities let you position an anchored element by computing its top, right, bottom, left, or inset value from a specific edge of its anchor. Unlike position-area, which places an element in a grid-like region relative to the anchor, these utilities use the anchor() CSS function to pin one edge of the floating element to a precise edge of the anchor. Use them when you need sub-pixel control, offset spacing, or when the declarative region model of position-area is not expressive enough.

​
Directional properties

The utility prefix corresponds directly to the CSS property being set:
PrefixCSS property
top-anchor-{side}top
right-anchor-{side}right
bottom-anchor-{side}bottom
left-anchor-{side}left
inset-anchor-{side}inset

​
Anchor sides

The {side} segment maps to a named anchor side passed directly into the anchor() function:
Utility suffixanchor() side
-toptop
-rightright
-bottombottom
-leftleft
-startstart
-endend
-self-startself-start
-self-endself-end
-centercenter

​
Basic usage

Use top-anchor-bottom to align the top edge of the floating element with the bottom edge of its anchor: 
<div class="anchor/my-btn">Button</div>
<div class="anchored/my-btn top-anchor-bottom left-anchor-left">Tooltip</div>

/* generated */
top: anchor(bottom);

​
Offsets using the Tailwind spacing scale

Append any Tailwind spacing value to add a calc() offset. For example, -4 corresponds to 1rem in the default spacing scale: 
<div class="anchored/my-btn top-anchor-bottom-4 left-anchor-left">Tooltip</div>

/* generated */
top: calc(anchor(bottom) + 1rem);
Negative offsets are also supported. Prefix the entire utility with -: 
<div class="anchored/my-btn -top-anchor-bottom-4 left-anchor-left">Tooltip</div>

/* generated */
top: calc(anchor(bottom) + -1rem);

​
Named anchor modifier

By default the anchor() function relies on the element’s implicit position-anchor. Add a /name modifier to target a specific named anchor instead. Non-dashed ident — the plugin prefixes the name with --tw-anchor_: 
<div class="top-anchor-bottom/my-btn">...</div>

/* generated */
top: anchor(--tw-anchor_my-btn bottom);
Dashed ident — the name is passed through unchanged: 
<div class="top-anchor-bottom/--my-btn">...</div>

/* generated */
top: anchor(--my-btn bottom);

​
Alignment utilities

In addition to the directional utilities above, the plugin provides anchor-center alignment helpers. These set the corresponding CSS alignment property to anchor-center, which centers the floating element over the anchor along that axis:
UtilityCSS propertyValue
justify-self-anchorjustify-selfanchor-center
self-anchoralign-selfanchor-center
items-anchoralign-itemsanchor-center
justify-items-anchorjustify-itemsanchor-center
place-self-anchorplace-selfanchor-center
place-items-anchorplace-itemsanchor-center
<div class="anchored/my-btn top-anchor-bottom justify-self-anchor">Centered tooltip</div>
Prefer position-area (via anchored-{position}) when you want to place an element in a named region such as top center or bottom-right. Use the explicit anchor() utilities when you need to snap a specific edge to a specific anchor side, combine multiple edge constraints, or add pixel-level offsets via the spacing scale.

anchored and position-area

The declarative region-based positioning model.

anchor-size() sizing

Size an element relative to its anchor’s dimensions.

Build docs developers (and LLMs) love

Get started for freeTalk to us