02 / THEME INFRASTRUCTURE

Antwind

Let Ant Design and Tailwind CSS share the same design tokens and theme scope instead of maintaining two sources of color truth.

Antwind does not reinvent a UI library. It creates a stable seam between two existing ecosystems, preserving their strengths while consolidating theme sources and usage.

THE PROBLEM

When Ant Design tokens and the Tailwind theme are maintained separately, the same brand color has two definitions; theme switching, Dark Mode, and scoped overrides also accumulate inconsistencies over time.

THE ABSTRACTION

CSS Variables establish a shared palette and Theme Schema, while AntwindThemeProvider injects the theme class, Dark Mode semantics, and root element. Developers maintain one Theme, and both UI systems update from the same source.

SCOPED THEMING

The Provider can target a rootEl, so themes are not limited to document.body. Different sections or embedded interfaces can have independent theme scopes while retaining token mappings consistent with Ant Design components.

INTEGRATION HARNESS

The project separates the core package and demo with pnpm and Turborepo. The demo build synchronizes official Ant Design component examples, so integration is not verified only through a few hand-written examples.