Share Tailwind v4 design tokens across multiple apps in a pnpm + Nx monorepo using a shared styles package and automated @source directives.

Tailwind v4's CSS-first configuration with @theme makes it straightforward to share design tokens across multiple apps in a monorepo. By placing a globals.css file with @theme directives in a dedicated shared package and referencing it via pnpm/npm workspaces, all apps can import the same colors, typography, and spacing tokens. Each consuming app just needs the @tailwindcss/vite plugin and a CSS entry point that imports both Tailwind and the shared package. For automating @source directives so Tailwind scans the right files across the dependency graph, the @juristr/nx-tailwind-sync Nx sync generator handles this automatically. A full working GitHub example is provided.

Sharing Tailwind CSS Styles Across Apps in a Monorepo

Step 2: Consume the Shared Styles in an App