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.

Anchors for Tailwind CSS is a plugin that adds full support for the CSS Anchor Positioning API to your Tailwind workflow. Rather than writing raw CSS, you can define anchors and position elements relative to them entirely through utility classes — with support for Tailwind v3 and v4.

Installation

Install the plugin and configure it for Tailwind v3 or v4 in minutes.

Quickstart

Build your first anchored UI element with a working code example.

Core Utilities

Learn the anchor, anchored, and position-area utility families.

Utility Index

Browse every utility class provided by this plugin at a glance.

​
What is CSS Anchor Positioning?

CSS Anchor Positioning is a native browser API that lets you position elements relative to other elements — called anchors — without JavaScript. It replaces complex positioning hacks with a clean, declarative model. This plugin exposes the full API as Tailwind utilities:
  • anchor/{name} — mark an element as a named anchor
  • anchored/{name} — attach a floating element to an anchor
  • anchored-{position} — set the position area relative to the anchor
  • top-anchor-bottom, w-anchor — use anchor() and anchor-size() functions
  • try-flip-all, anchored-visible-anchor — fallback and visibility control

anchor() Functions

Explicit directional positioning using the anchor() CSS function.

anchor-size() Sizing

Size elements relative to their anchors with anchor-size().

Position Visibility

Control when anchored elements are shown with position-visibility.

View Transitions

Animate position changes with the built-in View Transitions integration.

​
Get started

1

Install the package

Add @toolwind/anchors to your project with your preferred package manager.
npm install -D @toolwind/anchors
2

Register the plugin

Import the plugin in your Tailwind CSS config (v4) or tailwind.config.js (v3).
Tailwind v4
@import "@toolwind/anchors";
3

Define an anchor

Add the anchor/{name} class to the element you want to anchor from.
<button class="anchor/my-btn">Open</button>
4

Position relative to it

Use anchored-{position}/{name} on the floating element.
<div class="anchored-bottom-center/my-btn">Tooltip</div>
Head over to Quickstart for a complete working example, including a tooltip built entirely with utility classes.

Build docs developers (and LLMs) love

Get started for freeTalk to us