Tailwind

Forme components are class strings. Tailwind compiles them, and the tokens they compile to are CSS variables defined in Forme's foundation file. Both halves have to be right.

Version 4 required#

Forme uses Tailwind v4 and its @tailwindcss/postcss plugin. There is no tailwind.config.js: v4 reads your theme from CSS.

Tailwind v4 is what lets a component say bg-background and get the current value of --background without anybody having to wire a config file up.

Import order matters#

@import "tailwindcss";
@import "./components/forme/foundation.css";

Foundation must come after Tailwind. It defines the theme layer that turns --background into bg-background, so importing it first would mean the utilities have nothing to point at.

Class merging#

Every Forme component merges its className prop with cn(), which is clsx plus tailwind-merge. That is why you can override a variant's styling without !important:

<Button className="w-full">Get started</Button>
<Button variant="outline" className="rounded-xs">Cancel</Button>

Because the classes are merged, the last conflicting utility wins rather than both being emitted and the outcome depending on stylesheet order.

Still on v3#

It is supported, with two adjustments:

1. Point content at the folder holding your components so the copied source is scanned. Forme needs no @source, because its components are your files now.
2. Foundation still works, but it has to be imported into your globals.css after @tailwind directives rather than after @import "tailwindcss".

Expect to move to v4 eventually; it is where the library is developed.