Using with Tailwind v4

Styled components

Import Manti before Tailwind:

@import '@manti-ui/styles/tailwind.css';
@import 'tailwindcss';

The order keeps Tailwind utilities above Manti component styles:

<Button className="rounded-none px-8">Save</Button>

If Tailwind is imported first, utility overrides may lose to the Manti layer.

Theme bridge

The bridge maps Manti tokens to Tailwind v4 theme namespaces:

Utilities resolve to var(--manti-*) at runtime, so token overrides and data-theme changes continue to work.

:root {
  --manti-radius-factor: 0.8;
  --manti-surface: light-dark(#ffffff, #15151b);
}

Headless use

Skip component CSS and keep only tokens plus the theme bridge:

@import '@manti-ui/styles/tokens.css';
@import '@manti-ui/styles/tailwind-theme.css';
@import 'tailwindcss';

Then style public state attributes directly:

<Button className="bg-primary-600 data-[loading=true]:opacity-70">Save</Button>

Tailwind v3 can reference var(--manti-*) from its config, but the @theme bridge is v4-only.

Last updated 13 September 2026