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.

4m read timeFrom nx.dev
Post cover image
Table of contents
The Workspace StructureStep 1: Create the Shared Styles PackageStep 2: Consume the Shared Styles in an AppAutomating @source DirectivesFull ExampleLearn More
1 Comment

Sort: