Install and configure @toolwind/anchors with Tailwind CSS

This page walks you through installing @toolwind/anchors and registering it with your Tailwind CSS setup. The package supports both the CSS-first config introduced in Tailwind v4 and the JS config used in Tailwind v3.

Install the package

Install @toolwind/anchors as a dev dependency using your preferred package manager.

npm install -D @toolwind/anchors

The package runs a postinstall script that applies a patch via patch-package. This only runs when your project is inside a git repository. Outside of a git repo (for example, in a CI environment with no .git directory) the step is skipped automatically and a message is logged instead.

How you register the plugin depends on which version of Tailwind CSS you are using.

Tailwind CSS v4 (CSS config)
Tailwind CSS v3 (JS config)

In Tailwind v4, plugins are imported directly in your CSS file using @import. Add the following line to your main stylesheet:

style.css

@import "@toolwind/anchors";

This is typically your entry CSS file — the same file where you import tailwindcss itself.

In Tailwind v3, plugins are registered in tailwind.config.js. Import the plugin and add it to the plugins array:

tailwind.config.js

import anchors from "@toolwind/anchors";

export default {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  plugins: [anchors],
};

If you are using CommonJS, use require instead:

tailwind.config.js

const anchors = require("@toolwind/anchors");

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  plugins: [anchors],
};

Verify the setup

Add a quick smoke test to confirm the plugin is generating classes. Add these classes to any element in your markup:

<div class="anchor/my-btn">Button</div>
<div class="anchored-bottom-center/my-btn">Tooltip</div>

Inspect the element in your browser’s DevTools. You should see anchor-name set on the first element and position-anchor plus position-area set on the second.

Peer dependencies

@toolwind/anchors requires Tailwind CSS as a peer dependency:

tailwindcss >= 3.0.0 || >= 4.0.0

No other runtime dependencies are required.

Next steps

Quickstart

Build a tooltip using anchor and anchored utilities.

Utility index

See every utility class the plugin provides.

Get Started

Core Utilities

Advanced Features

Reference

Install and configure @toolwind/anchors with Tailwind CSS

Peer dependencies

Next steps

Quickstart

Utility index

Build docs developers (and LLMs) love

Get Started

Core Utilities

Advanced Features

Reference

Documentation Index

​Peer dependencies

​Next steps

Quickstart

Utility index

Build docs developers (and LLMs) love

Peer dependencies

Next steps