Monorepo with centralized Tailwind package with builds triggered from consumer apps?

[dgirgenti]

Hello, I'm working in a large Nx monorepo with a bunch of Next.js apps, multiple shared UI libraries, and we are trying to introduce Tailwind v4 (not coming from v3) in a centralized manner

We have roughly the following structure:

root
├─ libs
│  ├─ legacy-global-ui-components
│  │  ├─ non-tailwindified-component1.tsx
│  │  ├─ non-tailwindified-component2.tsx
│  │  └─ ...
│  └─ shared
│     ├─ tailwind-styles
│     │  ├─ index.css
│     │  └─ theme
│     │     ├─ colors.css
│     │     ├─ fonts.css
│     │     └─ ...
│     └─ new-global-ui-components
│        ├─ tailwindified-component1.tsx
│        ├─ tailwindified-component2.tsx
│        └─ ...
└─ apps
   ├─ app1
   │  ├─ _app.tsx
   │  ├─ pages
   │  │  └─ ...<uses some legacy-global-ui-components & some new-global-ui-components>...
   │  └─ styles
   │     └─ app1.css
   └─ app2
      ├─ _app.tsx
      ├─ pages
      │  └─ ...<uses some legacy-global-ui-components & some new-global-ui-components>...
      └─ styles
         └─ app2.css

Basically, we want to have all of the theming defined in one place (/libs/shared/tailwind-styles), but have the consumer apps generate their own individual CSS files (e.g. /apps/app1->app1.css, /apps/app2->app2.css) based on what is actually used within the app. For example, app1 may use tailwindified-component1.tsx but not tailwindified-component2.tsx, so we wouldn't want it to generate classes only used by the latter. But both app1 and app2 would need the same @theme setup for variables.

Is this provided by v4's automatic source detection if we just @import 'tailwindcss' within /apps/appX/styles/appX.css, or will we need to define @sources in each app to point back to the shared, tailwindified UI library?

[wongjn]

It is not provided by v4's automatic source detection if you just @import 'tailwindcss' within /apps/appX/styles/appX.css. You would need to define @sources in each app to point back to the shared, tailwindified UI library. Furthermore, if you want to ensure only the minimal needed CSS is generated, you'd need to keep track of which component files you use per app and individually @source them.