Complete utility class reference for @toolwind/anchors

This page is a quick reference for all utility classes provided by the @toolwind/anchors plugin. Each section covers a distinct area of the CSS Anchor Positioning API. For deeper explanations, follow the links to the relevant guide pages.

Anchor definition

These utilities assign an anchor-name to an element, making it a named anchor that other elements can position themselves relative to.

Class	CSS output	Notes
`anchor/{name}`	`anchor-name: --tw-anchor_{name}`	Auto-prefixes plain idents with `--tw-anchor_`
`anchor/--{name}`	`anchor-name: --{name}`	Preserves dashed ident as-is
`anchor-scope/{name}`	`anchor-scope: --tw-anchor_{name}`	Scopes anchor name to a subtree
`anchor-scope/--{name}`	`anchor-scope: --{name}`	Scopes using a dashed ident directly

<!-- plain ident — auto-prefixed -->
<div class="anchor/my-tooltip-trigger"></div>

<!-- dashed ident — used as-is -->
<div class="anchor/--my-tooltip-trigger"></div>

See Anchor Name for a full explanation of naming conventions, variable shorthand syntax, and v3/v4 differences.

Anchoring and positioning

These utilities attach a floating element to a named anchor and optionally set its position area. When a name modifier is present, the utility also sets position: absolute and view-transition-name (inside a :where() block for easy override).

Class	CSS output
`anchored/{name}`	`position-anchor`, `position: absolute`, `view-transition-name`
`anchored-{position}`	`position-area: {position}`
`anchored-{position}/{name}`	`position-anchor` + `position-area` + absolute positioning

<!-- attach only -->
<div class="anchored/my-btn"></div>

<!-- position only (assumes position-anchor is set elsewhere) -->
<div class="anchored-top-center"></div>

<!-- attach and position in one class -->
<div class="anchored-top-center/my-btn"></div>

See Anchored for details on the :where() specificity pattern and how to override position or view-transition-name.

Position area values

All 20 supported position-area values map to the following utility suffixes:

Utility suffix	CSS value
`top-center`	`top center`
`top-span-left`	`top span-left`
`top-span-right`	`top span-right`
`top`	`top`
`left-center`	`left center`
`left-span-top`	`left span-top`
`left-span-bottom`	`left span-bottom`
`left`	`left`
`right-center`	`right center`
`right-span-top`	`right span-top`
`right-span-bottom`	`right span-bottom`
`right`	`right`
`bottom-center`	`bottom center`
`bottom-span-left`	`bottom span-left`
`bottom-span-right`	`bottom span-right`
`bottom`	`bottom`
`top-left`	`top left`
`top-right`	`top right`
`bottom-left`	`bottom left`
`bottom-right`	`bottom right`

See Position Area for a visual guide to each value.

Directional positioning with `anchor()`

These utilities generate explicit top, right, bottom, left, or inset values using the anchor() CSS function. An optional Tailwind spacing offset wraps the result in calc(). Pattern: {property}-anchor-{side} or {property}-anchor-{side}-{offset}/{name?}

{property} — top, right, bottom, left, or inset
{side} — top, right, bottom, left, start, end, self-start, self-end, center
{offset} — any Tailwind spacing value (e.g. 4 → 1rem)
/{name} — optional anchor name modifier

Example class	CSS output
`top-anchor-bottom`	`top: anchor(bottom)`
`top-anchor-bottom-4`	`top: calc(anchor(bottom) + 1rem)`
`left-anchor-right`	`left: anchor(right)`
`bottom-anchor-top-2`	`bottom: calc(anchor(top) + 0.5rem)`
`top-anchor-bottom/my-name`	`top: anchor(--tw-anchor_my-name bottom)`
`inset-anchor-center`	`inset: anchor(center)`

<!-- position tooltip 1rem below anchor's bottom edge -->
<div class="top-anchor-bottom-4/my-btn"></div>

See anchor() Functions for a full reference including negative offsets.

Anchor-center alignment

These utilities set the corresponding CSS alignment property to anchor-center, which centers a floating element on its anchor’s main axis.

Class	CSS property set
`justify-self-anchor`	`justify-self: anchor-center`
`self-anchor`	`align-self: anchor-center`
`justify-items-anchor`	`justify-items: anchor-center`
`items-anchor`	`align-items: anchor-center`
`place-items-anchor`	`place-items: anchor-center`
`place-self-anchor`	`place-self: anchor-center`

Sizing with `anchor-size()`

These utilities set width, height, or min/max dimension properties using the anchor-size() CSS function. An optional spacing offset wraps the result in calc(). Pattern: {abbr}-anchor or {abbr}-anchor-{size} or {abbr}-anchor/{name}

{abbr} — w, h, min-w, min-h, max-w, max-h
{size} — width, height, block, inline, self-block, self-inline
/{name} — optional anchor name modifier

Example class	CSS output
`w-anchor`	`width: anchor-size(width)`
`h-anchor`	`height: anchor-size(height)`
`w-anchor-height`	`width: anchor-size(height)`
`h-anchor-inline`	`height: anchor-size(inline)`
`min-w-anchor`	`min-width: anchor-size(width)`
`max-h-anchor-block`	`max-height: anchor-size(block)`
`w-anchor/my-name`	`width: anchor-size(--tw-anchor_my-name width)`
`w-anchor-height/--my-name`	`width: anchor-size(--my-name height)`

<!-- make a popover the same width as its anchor button -->
<div class="w-anchor/my-btn anchored/my-btn anchored-bottom"></div>

See anchor-size() Sizing for offset usage and additional examples.

Position visibility

Controls when an anchored element is rendered visible using position-visibility.

Class	CSS output
`anchored-visible-always`	`position-visibility: always`
`anchored-visible-anchor`	`position-visibility: anchors-visible`
`anchored-visible-no-overflow`	`position-visibility: no-overflow`
`anchored-visible-[{value}]`	`position-visibility: {value}` (arbitrary)

See Position Visibility for behavior details.

Position try fallbacks

These utilities configure fallback positioning strategies when the primary position overflows the viewport.

`try-order-*` — `position-try-order`

Class	CSS output
`try-order-normal`	`position-try-order: normal`
`try-order-w`	`position-try-order: most-width`
`try-order-h`	`position-try-order: most-height`

`try-*` — `position-try-fallbacks`

Class	CSS output
`try-none`	`position-try-fallbacks: none`
`try-flip-all`	`position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline`
`try-flip-x`	`position-try-fallbacks: flip-inline`
`try-flip-y`	`position-try-fallbacks: flip-block`
`try-flip-s`	`position-try-fallbacks: flip-start`
`try-{position-area}`	`position-try-fallbacks: {position-area value}`
`try-[{value}]`	`position-try-fallbacks: {value}` (arbitrary)

All 20 position area values are valid as try- suffixes. Examples: try-top, try-bottom-left, try-right-span-top.

See Position Try for how to combine multiple fallback values.

Get Started

Core Utilities

Advanced Features

Reference

Complete utility class reference for @toolwind/anchors

Anchor definition

Anchoring and positioning

Position area values

Directional positioning with `anchor()`

Anchor-center alignment

Sizing with `anchor-size()`

Position visibility

Position try fallbacks

`try-order-*` — `position-try-order`

`try-*` — `position-try-fallbacks`

Build docs developers (and LLMs) love

Get Started

Core Utilities

Advanced Features

Reference

Documentation Index

​Anchor definition

​Anchoring and positioning

​Position area values

​Directional positioning with anchor()

​Anchor-center alignment

​Sizing with anchor-size()

​Position visibility

​Position try fallbacks

​try-order-* — position-try-order

​try-* — position-try-fallbacks

Build docs developers (and LLMs) love

Anchor definition

Anchoring and positioning

Position area values

Directional positioning with `anchor()`

Anchor-center alignment

Sizing with `anchor-size()`

Position visibility

Position try fallbacks

`try-order-*` — `position-try-order`

`try-*` — `position-try-fallbacks`