How to make Tailwindcss v4 pick up utility classes in npm packages

A one-liner fix for “why isn’t Tailwind seeing my component library?”

Part of my job at Xata team is maintaining, evangelizing, and extending our UI library. After two years (and counting!) that means living in monorepos and recently helping with our private npm packages.

Recently I hit a snag while wiring up Tailwind 4 inside our monorepo xata/agent. The app saw Tailwind just fine—but Tailwind steadfastly ignored the utility classes baked into our shared package @xata.io/components.

Sound familiar? Good news: the fix is a single PostCSS directive.

The Monorepo Layout

In another repo our theme lives under packages/, but the problem—and solution—are identical.

First Attempt: Point base at the repo root

Because Tailwind 4 worked well in another repo, I simply copied its PostCSS config:

That worked in one repo, so I tried the same in dbagent. but Tailwind still ignored every class inside node_modules/@xata.io/components.

Why? Tailwind ignores node_modules by default, and the base option accepts one path, not an array. So I couldn’t just add node_modules to the base path.

The ✨ One-Liner Fix: @source

Add postcss-import so PostCSS can follow @import statements:

Now, in your global CSS:

That single @source overrides Tailwind’s ignore rule, walks the package, and plucks out only the utilities you actually use. Zero extra CSS bloat, full design-system parity.

Next.js transpilePackages Config

Don’t forget to transpile your packages in next.config.ts:

Recap