Anchors for Tailwind CSS v1.0.0 is finally here! This release is packed with powerful new features and important bug fixes, making it easier than ever to leverage the CSS Anchor Positioning API in your Tailwind CSS projects. These enhancements simplify the creation of complex UI patterns like tooltips, popovers, and other dynamically positioned elements.

✨ What's New in v1.0.0

• Anchor Scoping (anchor-scope/*): Introducing new utilities for managing anchor scopes, providing more granular control over how anchors are defined and utilized within your components, helping to prevent anchor positional collisions for anchors that share the same name (especially helpful with dynamically rendered content).
• Conditional Visibility (anchored-visible-*): You can now control the visibility of anchored elements based on the anchor's visibility or whether the element overflows the viewport.
  • anchored-visible-always: Element is always visible (default if property isn't set).
  • anchored-visible-anchor: Element is visible only when the anchor is at least partially visible.
  • anchored-visible-no-overflow: Element is visible only when it does not overflow the viewport.
  • Supports arbitrary values: anchored-visible-[custom-value].
• Fallback Positions & Ordering (try-*, try-order-*): Implement robust fallback strategies for anchored elements when their preferred position is not ideal.
  • Ordering (try-order-*):
    • try-order-normal: Tries fallbacks in their defined order.
    • try-order-w: Prioritizes fallbacks that maximize width.
    • try-order-h: Prioritizes fallbacks that maximize height.
  • Fallbacks (try-*):
    • try-none: No fallbacks.
    • try-flip-all: Flips horizontally, vertically, and diagonally.
    • try-flip-x: Flips horizontally.
    • try-flip-y: Flips vertically.
    • Also supports position area values like try-top, try-bottom-left, etc.
• Enhanced Anchor-Based Alignment ({direction}-anchor-{side}-{offset?}): Precisely position elements relative to an anchor's sides using utilities that leverage the anchor() CSS function.
  • Example: top-anchor-bottom results in top: anchor(bottom);
  • Offset Support: top-anchor-bottom-4 results in top: calc(anchor(bottom) + 1rem);
    • Supports negative offsets: -top-anchor-bottom-4 results in top: calc(anchor(bottom) - 1rem);
• Full Interoperable Support for Tailwind CSS v3 & v4: This release ensures robust compatibility with both Tailwind CSS v3.x (specifically versions ≥ 3.3 where variable shorthand syntax was introduced) and the latest Tailwind CSS v4.x. The core fix contributed to Tailwind CSS for parsing variable shorthand syntax in modifiers means that anchors utilities will behave consistently and correctly across these Tailwind versions, preventing unexpected parsing issues and ensuring a smooth experience for users on either version.

🐛 Bug Fixes

• Positional Offsets: This version includes a fix for a bug related to positional offsets, ensuring more accurate and reliable element placement.
• Contribution to Tailwind CSS Core: I discovered a bug in Tailwind CSS's parsing of variable shorthand syntax within modifiers. A pull request to address this issue was opened and has been successfully merged into the main Tailwind CSS repository. You can view the details here: tailwindlabs/tailwindcss#17889.

Learn More

For full details on all utilities and how to use them, please refer to the README.md.

I'm excited for you to try out these new features and improvements!

This release introduces support for several advanced CSS Anchor Positioning properties, enabling conditional visibility, fallback strategies, and anchor-based alignment. It also includes an important fix for positional utilities.

✨ New Features

• Anchor Center Utilities *-anchor → [property]: anchor-center

  • Added utilities for centering elements relative to their anchor using anchor-center.
  • Includes:
    • justify-self-anchor (justify-self: anchor-center)
    • self-anchor (align-self: anchor-center)
    • justify-items-anchor (justify-items: anchor-center)
    • items-anchor (align-items: anchor-center)
    • place-items-anchor (place-items: anchor-center)
    • place-self-anchor (place-self: anchor-center)

• Position Visibility anchored-visible-* → position-visibility: [value]

  • Control element rendering based on anchor visibility or overflow state (position-visibility).
  • Keywords:
    • anchored-visible-always (position-visibility: always): Element is always visible.
    • anchored-visible-anchor (position-visibility: anchors-visible): Visible only when the anchor element is at least partially visible.
    • anchored-visible-no-overflow (position-visibility: no-overflow): Visible only when the element itself does not overflow the viewport.
  • Supports arbitrary values: anchored-visible-[value].
  • (Note: anchors-valid is part of the spec but not yet widely supported or included).

• Position Try Order try-order-* → position-try-order: [value]

  • Define the order in which fallback positions are attempted (position-try-order).
  • Keywords:
    • try-order-normal (position-try-order: normal): Default order.
    • try-order-w (position-try-order: most-width): Prioritize fallbacks maximizing width.
    • try-order-h (position-try-order: most-height): Prioritize fallbacks maximizing height.
  • Supports arbitrary values: try-order-[value].

• Position Try Fallbacks try-* → position-try-fallbacks: [value]:

  • Define a sequence of fallback positions or strategies (position-try-fallbacks).
  • Keywords:
    • try-none (position-try-fallbacks: none): No fallbacks.
    • try-flip-x (position-try-fallbacks: flip-inline): Flip horizontally.
    • try-flip-y (position-try-fallbacks: flip-block): Flip vertically.
    • try-flip-s (position-try-fallbacks: flip-start): Flip along the writing mode's start direction.
  • Supports standard position-area keywords (e.g., try-top applies position-try-fallbacks: top, try-bottom-left applies position-try-fallbacks: bottom left)
  • Supports arbitrary values: try-[value].

🐛 Bug Fixes

• Positional Anchor Utilities: Fixed an issue where utilities like {top|right|bottom|left|inset}-anchor-{side}-{offset?} (e.g., top-anchor-bottom-4) were incorrectly configured. The offset value is now correctly optional, and the utilities properly map to the theme's inset scale values. Using top-anchor-bottom now correctly applies top: anchor(bottom) without requiring an explicit offset.