Tailwind v4 class detection: how to only include Ui Kit classes that are actually used in a Client App?

[dubbha]

Say I have a UI Kit published as a standalone package: @repo/ui, and it exports 100 reusable components.
And I have a Client App only using one of the components, say import { Button } from "@repo/ui".

Using Tailwind v4, how do I only bundle the Client App to only include tailwind classes that are actually used? Like only the tailwind classes from the Button, but not the other 99 components?

The only solution mentioned in docs is explicitly registering sources like so:

@source "../node_modules/@acmecorp/ui-lib";

But this will effectively include all the classes from all the 100 components.
On the other hand, if I omit the @source, button's classes won't be included.

It seems like you either include the components code inside your app code, or you're stuck with no tailwind bundle optimization.

Is there even a solution for this with Tailwind?

[wongjn]

You can make the sources more fine-grained to individual files (if the lib is set up that way) like:

@source "../node_modules/@acmecorp/ui-lib/button.js";

Though as implied above, this is manual.