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 anchor/{name} utility sets the anchor-name CSS property on an element, registering it as a named anchor that other elements can position themselves relative to. Because anchor-name requires a dashed ident (a custom property–style name beginning with --), the plugin automatically converts plain names into dashed idents so you don’t have to type the -- prefix yourself.

​
Naming variants

There are four ways to pass a name to anchor/{name}. Each produces different CSS depending on whether you supply a plain name, an explicit dashed ident, an arbitrary value, or a CSS variable reference.

​
1. Non-dashed ident

Pass a plain name and the plugin prefixes it with --tw-anchor_ to satisfy the dashed-ident requirement. 
<div class="anchor/my-anchor"></div>

.anchor\/my-anchor {
  anchor-name: --tw-anchor_my-anchor;
}
Use this form when you define both the anchor and its consumers in HTML classes — the plugin keeps the name consistent everywhere you use my-anchor as the modifier.

​
2. Dashed ident

Prefix the name with -- to pass a dashed ident directly. The plugin uses it as-is, which is useful when you need to share the anchor name with hand-written CSS or another plugin. 
<div class="anchor/--my-anchor"></div>

.anchor\/--my-anchor {
  anchor-name: --my-anchor;
}

​
3. Arbitrary value

Square-bracket arbitrary syntax lets you pass any value that is already a valid dashed ident. 
<div class="anchor/[--my-anchor]"></div>
In v4, anchor/[--my-anchor] passes the dashed ident directly — identical to the dashed-ident variant above.
.anchor\/\[--my-anchor\] {
  anchor-name: --my-anchor;
}
In Tailwind CSS v4, anchor/[--my-anchor] and anchor/--my-anchor are equivalent and both produce anchor-name: --my-anchor. Use anchor/--my-anchor (without brackets) for the simpler syntax.

​
4. Variable shorthand syntax

Use this when the anchor name is stored in a CSS custom property and you want to reference it dynamically.
In v4, wrap the variable name in parentheses to produce a var() reference:
<div class="[--x:--my-anchor]">
  <div class="anchor/(--x)"></div>
</div>

.anchor\/\(--x\) {
  anchor-name: var(--x);
}
anchor/(--x) and anchor/[var(--x)] are equivalent in v4 — both produce anchor-name: var(--x).

​
anchor-scope/

The anchor-scope/{name} utility follows the exact same naming rules as anchor/{name}, but sets the anchor-scope CSS property instead of anchor-name. Use it to limit anchor name lookup to a subtree, preventing name collisions in repeated components. 
<div class="anchor/card anchor-scope/card">
  <!-- anchors named "card" inside this subtree won't leak out -->
</div>

.anchor\/card {
  anchor-name: --tw-anchor_card;
}
.anchor-scope\/card {
  anchor-scope: --tw-anchor_card;
}
All four naming variants (non-dashed ident, dashed ident, arbitrary value, variable shorthand) work identically for anchor-scope/{name}.

​
Summary

Syntaxv4 outputv3 output
anchor/my-anchoranchor-name: --tw-anchor_my-anchoranchor-name: --tw-anchor_my-anchor
anchor/--my-anchoranchor-name: --my-anchoranchor-name: --my-anchor
anchor/[--my-anchor]anchor-name: --my-anchoranchor-name: var(--my-anchor)
anchor/(--x)anchor-name: var(--x)error
anchor/[var(--x)]anchor-name: var(--x)anchor-name: var(--x)
anchor/[--x]anchor-name: --xanchor-name: var(--x)

Build docs developers (and LLMs) love

Get started for freeTalk to us