Unused classes with Tailwind CSS and multiple apps

[omaralfawareh]

Context:
I'm using an Nx monorepo with multiple Next.js applications and a shared library that contains common components. Each app uses Tailwind CSS configured with one root Tailwind configuration file.

Problem:
When I import any component from the shared library in any of my applications, I need to reference the shared library components in the app’s Tailwind config (tailwind.config.js) under the content field. However, this causes Tailwind to generate all CSS classes for the entire shared library, even though the app may only use a few components from the library.

Desired Outcome:
I want a way to:

Automatically include only the Tailwind classes needed by the specific components used in each app (i.e., without generating unused classes from the shared library).
Avoid manually specifying library paths or having to list every component in the content field.
Challenges:

If I add the entire library to the content section, Tailwind generates unused CSS.
If I don't include the library, no classes for the shared components get generated.
Tailwind configurations typically live at the app level, so libraries can't have their own Tailwind config.
Request:
I’m looking for solutions or best practices to handle Tailwind class generation when using shared component libraries in an Nx monorepo, ideally with some automation to reduce manual configuration effort.