@campfire-interactive/tailwind-preset

A drop-in replacement for the per-app styles/theme.css in the seven Tailwind v4 frontends. It defines the shadcn semantic names — --primary, --muted, --border, --ring — from --cfi-* tokens and re-exports them through @theme inline, so bg-primary and text-muted-foreground resolve to the shared tokens at every existing call site without touching a page.

That is the point of shipping it before the components: seven apps already write those utilities across ~700 page files.

⚠ Adoption is not open yet

Verified on analytics — every screen was proven identical to the deployed dev app by computed-style diff, so the variable mapping is right. Nothing else has used it, and the token naming underneath is still unsettled. The gate is in the repo's CLAUDE.md.

If you are an AI agent working in a product repo: do not add this dependency.

Install

npm i @campfire-interactive/tailwind-preset @campfire-interactive/design-tokens

Replace the app's theme import:

@import 'tailwindcss' source(none);
@source '../**/*.{js,ts,jsx,tsx}';
@import '@campfire-interactive/design-tokens/tokens.css';
@import '@campfire-interactive/tailwind-preset';

The app sets its own badge color with one variable. Controls are untouched by it — they come from --cfi-action:

:root { --cfi-app-primary: #7c3aed; --cfi-app-primary-hover: #6d28d9; }

What it adds beyond the shadcn names

• Semantic status utilities shadcn has no equivalent for: bg-success-soft text-success-text, and the same for warning / error / info / neutral. Each pair meets 4.5:1.
• Chart series mapped to --cfi-chart-1 … -8 plus grid, axis and label chrome, so recharts stops being per-app guesswork.
• Both dark-mode conventions in the fleet — the .dark class the generated files use and the data-theme="dark" attribute the tokens define — so an app can migrate between them without a flag day.

Peer dependencies

tailwindcss v4 and @campfire-interactive/design-tokens.