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 anchored utility family wires an element to a named anchor and controls where it appears relative to that anchor. It covers three distinct use cases: attaching an element to an anchor by name, setting a position area on its own, and doing both at once with a single shorthand class.

​
anchored/ — attach to an anchor

anchored/{name} sets position-anchor on the element, linking it to the anchor registered under that name. It also applies position: absolute and a view-transition-name at zero specificity so they are trivially overridable. 
<div class="anchored/my-anchor"></div>

.anchored\/my-anchor {
  position-anchor: --tw-anchor_my-anchor;
}
.anchored\/my-anchor:where(.anchored\/my-anchor) {
  position: absolute;
  view-transition-name: --tw-anchor-view-transition-313d192p322r2w3336;
}
The same naming rules that apply to anchor/{name} apply here: a plain name like my-anchor is prefixed to --tw-anchor_my-anchor, while --my-anchor is used as-is, and variable shorthands produce var() references.
position: absolute and view-transition-name are set inside :where(&), which reduces their specificity to zero. This means any other positioning utility you add — fixed, relative, or an arbitrary [position:sticky] — will override them without needing !important. The position-anchor declaration itself is set at normal specificity.
The view-transition-name value is derived deterministically from the anchor name using a base-36 character encoding, so it is unique per name and will not collide with your own view-transition-name declarations. This makes every anchored element animatable via document.startViewTransition() with no extra configuration. See View Transitions for details.
Anchored elements must use absolute or fixed positioning. The plugin defaults to absolute (at zero specificity), so adding fixed to the element’s classes is all you need to switch to fixed positioning:
<div class="anchored/my-anchor fixed"></div>

​
anchored- — set position area only

anchored-{position} sets position-area without touching position-anchor or position. Use this when you have already linked the element to an anchor via anchored/{name} (or by other means) and only want to control placement. 
<div class="anchored-top-center"></div>

.anchored-top-center {
  position-area: top center;
}
See position-area values for the full list of supported position keywords.

​
anchored-/ — shorthand

anchored-{position}/{name} combines position-anchor, position-area, position: absolute, and view-transition-name into a single class. 
<div class="anchored-top-center/my-anchor"></div>

.anchored-top-center\/my-anchor {
  position-anchor: --tw-anchor_my-anchor;
  position-area: top center;
}
.anchored-top-center\/my-anchor:where(.anchored-top-center\/my-anchor) {
  position: absolute;
  view-transition-name: --tw-anchor-view-transition-313d192p322r2w3336;
}
This is the most concise way to both attach and place an element in one step. The /{name} modifier follows the same naming conventions as anchor/{name} and anchored/{name}.

​
Overriding view-transition-name

If you need to opt out of the auto-generated view-transition-name, add an arbitrary property class alongside your anchored class: 
<div class="anchored/my-anchor [view-transition-name:none]"></div>
Because the generated view-transition-name is set inside :where() at zero specificity, this single arbitrary class is enough to override it.

​
Full example

<!-- Define the anchor -->
<button class="anchor/tooltip-trigger">Hover me</button>

<!-- Attach and position the tooltip -->
<div class="anchored-top-center/tooltip-trigger">
  Tooltip content
</div>

position-area values

Full list of every supported position area value and how it maps to CSS.

anchor/{name}

How to register an element as a named anchor.

Build docs developers (and LLMs) love

Get started for freeTalk to us