Theming

Tailwind v3 — JS preset

Each component declares its tokens in a tailwindConfig.theme.extend object.uniqueui add merges them into your tailwind.config.{js,ts}using ts-morph, key-by-key. Existing keys win, so the merge is safe to re-run.

To dump the full preset for every registry component at once (useful when bootstrapping a shared config in a monorepo), run:

npx uniqueui theme --format v3 > tailwind.uniqueui.cjs

Then load it as a preset in your config:

// tailwind.config.js
module.exports = {
  presets: [require("./tailwind.uniqueui.cjs")],
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
};

Tailwind v4 — @theme in CSS

v4 projects keep tokens in CSS, not JS. Components carry a tailwindCsssnippet (typically an @theme block plus any @keyframes) that the CLI appends to the file at components.json#tailwind.css, wrapped in markers so re-runs stay idempotent:

/* uniqueui:start moving-border */
@theme {
  --animate-border-spin: border-spin 3s linear infinite;
}
@keyframes border-spin {
  100% { transform: rotate(-360deg); }
}
/* uniqueui:end moving-border */

To preview or precompose the full theme without touching your CSS, use:

npx uniqueui theme --format v4 --out app/uniqueui.css

Auto detection

The default is --format auto: the CLI reads components.json, looks at the file it points at via tailwind.css, and at your project's tailwindcss range and PostCSS plugins. If the project is on v4 you get the CSS snippet; on v3 you get the JS preset. Same logic uniqueui doctor uses for its diagnostic.

Scoping to one component

Pass --component <slug>to print just one component's tokens. Handy for diffing a single component's upstream tokens against the version sitting in your repo:

npx uniqueui theme --component moving-border --format v3