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-size() CSS function lets you size an element based on the dimensions of its anchor. This plugin exposes it through a family of utilities that follow the pattern {size-property}-anchor{-anchor-size?}/{name?}. They are useful whenever you want a tooltip, popover, or other floating element to match or proportion itself against the element it is anchored to — without hardcoding sizes or writing custom CSS.

​
Covered size properties

The utility prefix maps to a CSS sizing property:
PrefixCSS property
w-anchorwidth
h-anchorheight
min-w-anchormin-width
min-h-anchormin-height
max-w-anchormax-width
max-h-anchormax-height

​
Anchor size values

An optional suffix after -anchor specifies which dimension of the anchor to read. When the suffix is omitted, the function uses the same dimension as the property being set (for example, w-anchor reads the anchor’s width):
Utility suffixanchor-size() argumentReads
(none)(empty / implicit)same dimension as the property
-widthwidthanchor’s inline width
-heightheightanchor’s block height
-blockblockanchor’s block size
-inlineinlineanchor’s inline size
-self-blockself-blockanchored element’s own block size
-self-inlineself-inlineanchored element’s own inline size
When you omit the anchor size suffix, the browser uses the dimension that matches the CSS property. w-anchor is equivalent to width: anchor-size(width) and h-anchor is equivalent to height: anchor-size(height). This is the shortest way to match an element’s size to its anchor.

​
Basic usage

Match the floating element’s width to the anchor’s width: 
<div class="anchor/my-btn">Button</div>
<div class="anchored/my-btn anchored-bottom w-anchor">Dropdown</div>

/* generated */
width: anchor-size(width);
Match the floating element’s height to the anchor’s height: 
<div class="anchored/my-btn h-anchor">...</div>

/* generated */
height: anchor-size(height);

​
Cross-dimension sizing

You can read a different anchor dimension than the one you are setting. This is useful for creating square elements that match the anchor’s height, or for other proportional relationships: 
<!-- Set the width to the anchor's height -->
<div class="anchored/my-btn w-anchor-height">...</div>

/* generated */
width: anchor-size(height);

​
Named anchor modifier

Like the anchor() utilities, you can target a specific anchor by adding a /name modifier instead of relying on the implicit position-anchor. Non-dashed ident — prefixed with --tw-anchor_: 
<div class="w-anchor/my-btn">...</div>

/* generated */
width: anchor-size(--tw-anchor_my-btn width);
Dashed ident — passed through as-is: 
<div class="w-anchor/--my-btn">...</div>

/* generated */
width: anchor-size(--my-btn width);

​
Offsets and negative values

Append any Tailwind spacing value to compute a size with a calc() offset. Negative values are supported: 
<!-- 4 spacing units wider than the anchor -->
<div class="anchored/my-btn w-anchor-4">...</div>

/* generated */
width: calc(anchor-size(width) + 1rem);

<!-- 4 spacing units narrower than the anchor -->
<div class="anchored/my-btn -w-anchor-4">...</div>

/* generated */
width: calc(anchor-size(width) + -1rem);

anchor() functions

Explicit edge-to-edge positional placement with anchor().

Utility index

Full list of every utility provided by this plugin.

Build docs developers (and LLMs) love

Get started for freeTalk to us