Sharing Tailwind CSS Styles Across Apps in a Monorepo
Blog post from Nx
Tailwind v4 simplifies design token management in monorepos by introducing a CSS-first configuration with the @theme directive, allowing design tokens to be stored in a plain CSS file. This approach enables the creation of a shared styles package in a pnpm/npm workspace, facilitating token sharing across multiple apps without the need for repetitive updates. The shared styles package is set up by creating a package.json that points to the CSS file, which can then be imported by any app. Each app requires the @tailwindcss/vite plugin, a dependency on the shared styles, and a CSS entry point to import Tailwind and the shared tokens. Automation of Tailwind's @source directives is achieved through Nx's sync generators, which manage file paths for utility class scanning. A complete working example is available on GitHub, illustrating how to integrate these shared design tokens in a monorepo setup.
No tracked trend matches for this post yet.
Use this post, company, and trend context to find content marketing opportunities, perform competitive analysis, or address product feature gaps via the Plushcap MCP server or the Plushcap API.