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.

CSS Anchor Positioning is a relatively new browser API, first shipped in stable releases in 2024. As of 2025, support is solid in Chromium-based browsers but incomplete elsewhere. Before shipping anchor-positioned UI to production, it’s worth understanding the current landscape and planning a fallback strategy.
CSS Anchor Positioning is not yet supported in all major browsers. Using it in production without feature detection or a progressive enhancement approach may result in broken layouts for Safari and Firefox users. See the feature detection section below for recommended patterns.

​
Current support status

BrowserSupport
Chrome 125+Full support
Edge 125+Full support
FirefoxBehind a flag (not enabled by default)
SafariNot supported
Samsung InternetFull support (based on Chromium)
OperaFull support (based on Chromium)
Browser support data reflects the state as of 2025. Check MDN’s browser compatibility table for the latest figures.

​
No polyfill included

@toolwind/anchors is a utility-generation plugin only. It emits Tailwind utility classes that map directly to native CSS Anchor Positioning properties and functions. The plugin does not include any JavaScript polyfill or runtime shim. If you need polyfilled support for non-Chromium browsers, you will need to integrate a separate polyfill such as the CSS Anchor Positioning Polyfill maintained by OddBird.

​
Feature detection

The safest way to use CSS Anchor Positioning today is with the CSS @supports rule. This lets you apply anchor-positioned styles only in browsers that support the API, and provide a functional fallback for others. 
@supports (anchor-name: --foo) {
  /* anchor positioning styles go here */
}
You can wrap entire blocks of anchor utility classes in a @supports check. In Tailwind v4, you can write this directly in your CSS. In v3, use a custom CSS file or the addBase / addUtilities plugin API.

​
Example: progressive enhancement pattern

<!-- The element is always visible, but only positioned with anchoring in supporting browsers -->
<button class="anchor/my-btn">Toggle</button>

<div
  id="popover"
  class="hidden anchored-bottom-center/my-btn"
>
  Popover content
</div>

/* Fallback: static positioning for all browsers */
#popover {
  position: absolute;
  top: 100%;
  left: 0;
}

/* Enhanced: use anchor positioning where supported */
@supports (anchor-name: --foo) {
  #popover {
    /* Tailwind handles position-anchor and position-area; 
       override the static fallback above */
    top: unset;
    left: unset;
  }
}

​
Further reading

Build docs developers (and LLMs) love

Get started for freeTalk to us