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 CSS Anchor Positioning API is a native browser feature that lets you position any element relative to another element — called an anchor — without JavaScript. Before this API, building tooltips, dropdowns, popovers, and floating UI required either JavaScript layout calculations or complex CSS hacks. @toolwind/anchors brings this power directly into your Tailwind workflow as composable utility classes, so you can declare anchors and position elements against them entirely in HTML.

​
What is CSS anchor positioning?

CSS anchor positioning introduces two new concepts: an anchor element (any element assigned an anchor-name) and an anchored element (any element that uses position-anchor to link itself to an anchor). Once linked, the anchored element can be placed relative to any side of its anchor using position-area, or with explicit offsets using the anchor() function. You can also size anchored elements proportionally to their anchor using anchor-size(). This eliminates the need to track element positions in JavaScript for common UI patterns. The browser handles the geometry natively.

​
What this plugin provides

@toolwind/anchors maps the full CSS Anchor Positioning API to Tailwind utility classes. Instead of writing raw CSS, you apply classes directly in your markup:
  • anchor/{name} — assigns anchor-name to an element, registering it as an anchor
  • anchored/{name} and anchored-{position}/{name} — attaches an element to a named anchor and positions it using position-area
  • {top|right|bottom|left}-anchor-{side} — explicit directional positioning using the anchor() function with optional theme-based offsets
  • w-anchor, h-anchor, and variants — size an anchored element using anchor-size()
  • anchored-visible-* — controls conditional visibility via position-visibility
  • try-* and try-order-* — defines fallback positions and ordering via position-try-fallbacks and position-try-order
The plugin is fully JIT-compatible and requires no runtime. It also automatically assigns a view-transition-name to every anchored element, so position changes can be animated with the View Transitions API.

​
Tailwind v3 and v4 compatibility

@toolwind/anchors supports both Tailwind CSS v3 (JS config) and Tailwind CSS v4 (CSS-first config). The installation steps differ slightly between versions, but the utility classes are the same across both. See installation for setup instructions for each version.
The CSS Anchor Positioning API is a browser feature. Check browser support before shipping to production.

​
Where to go next

Installation

Add @toolwind/anchors to your project and configure it for Tailwind v3 or v4.

Quickstart

Build a working tooltip in minutes using anchor and anchored utilities.

Utility index

Browse the complete reference for every utility class the plugin provides.

Advanced features

Use anchor() and anchor-size() for precise offsets and proportional sizing.

Build docs developers (and LLMs) love

Get started for freeTalk to us