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 position-area CSS property places an anchored element in a specific region relative to its anchor. @toolwind/anchors maps a set of predefined keyword combinations to Tailwind utility names by replacing the space between multi-word values with a hyphen. For example, the CSS value top center becomes the utility suffix top-center, giving you anchored-top-center.

​
How utility names are derived

Every position-area CSS value consists of one or two keywords. Single-keyword values map directly (e.g. top → anchored-top). Two-keyword values join with a hyphen (e.g. bottom span-left → anchored-bottom-span-left). 
<!-- single keyword -->
<div class="anchored-top"></div>

<!-- two keywords -->
<div class="anchored-bottom-span-left"></div>

.anchored-top {
  position-area: top;
}

.anchored-bottom-span-left {
  position-area: bottom span-left;
}

​
Supported values

The table below lists every value supported by the plugin along with its generated CSS and a usage example.
Utility suffixCSS valueExample class
top-centertop centeranchored-top-center
top-span-lefttop span-leftanchored-top-span-left
top-span-righttop span-rightanchored-top-span-right
toptopanchored-top
left-centerleft centeranchored-left-center
left-span-topleft span-topanchored-left-span-top
left-span-bottomleft span-bottomanchored-left-span-bottom
leftleftanchored-left
right-centerright centeranchored-right-center
right-span-topright span-topanchored-right-span-top
right-span-bottomright span-bottomanchored-right-span-bottom
rightrightanchored-right
bottom-centerbottom centeranchored-bottom-center
bottom-span-leftbottom span-leftanchored-bottom-span-left
bottom-span-rightbottom span-rightanchored-bottom-span-right
bottombottomanchored-bottom
top-lefttop leftanchored-top-left
top-righttop rightanchored-top-right
bottom-leftbottom leftanchored-bottom-left
bottom-rightbottom rightanchored-bottom-right

​
Visual placement guide

The grid below illustrates where each value places the anchored element relative to the anchor (center). Corner values cover a single cell; edge values with center extend along the midpoint of a side; span-* values extend toward the named corner along that edge. 
┌──────────────┬──────────────┬──────────────┐
│  top-left    │  top-center  │  top-right   │
│  top-span-right  ←────→  top-span-left    │
├──────────────┼──────────────┼──────────────┤
│  left-span-bottom           right-span-top │
│  left-center │   ANCHOR     │ right-center │
│  left-span-top           right-span-bottom │
├──────────────┼──────────────┼──────────────┤
│ bottom-left  │bottom-center │ bottom-right │
│ bottom-span-right  ←───→ bottom-span-left  │
└──────────────┴──────────────┴──────────────┘

​
Usage with anchored-/

Position area values compose naturally with the shorthand that also sets the anchor name: 
<div class="anchored-bottom-right/my-anchor"></div>

.anchored-bottom-right\/my-anchor {
  position-anchor: --tw-anchor_my-anchor;
  position-area: bottom right;
}
.anchored-bottom-right\/my-anchor:where(.anchored-bottom-right\/my-anchor) {
  position: absolute;
  view-transition-name: --tw-anchor-view-transition-313d192p322r2w3336;
}

​
Usage as try-* fallbacks

Every position-area value also works as a try-* fallback. The utility prefix changes from anchored- to try- and the CSS property changes from position-area to an entry in position-try-fallbacks. For example, try-top-center adds top center as a positional fallback. See position-try for the full try-* reference.

anchored/{name}

How to attach elements to anchors and use position area with the anchored utility family.

position-try

Use try-* to define fallback positions when the preferred area overflows the viewport.

Build docs developers (and LLMs) love

Get started for freeTalk to us