Tailwind CSS is generating unused classes.

[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.

I want a way to:

1. 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).
2. Avoid manually specifying library paths or having to list every component in the content field.

Challenges:

1. If I add the entire library to the content section, Tailwind generates unused CSS.
2. If I don't include the library, no classes for the shared components get generated (obviously).
3. My tailwind configurations are at the app level, so my packages 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 ideally with some automation to reduce manual configuration effort, so that i only generate the classes that I actually used in my build.