Tailwind v4 + pnpm Monorepos: Missing Classes in Shared Components

Upgraded to Tailwind v4 in a pnpm monorepo? Components in packages/shared-components, app in packages/main-app? Your shared component utilities are not generating.

What you see in the browser:

<button className="text-(--btn-icon) bg-(--btn-bg)" />

The classes do not exist, and the raw function syntax just sits there unstyled.

Why It Breaks

Tailwind v4 moved configuration from JS to CSS. The old tailwind.config.js with content: paths is ignored.

Warning

The new automatic detection only scans inside your own package. It does not look at sibling packages in your workspace.

Fix: Add @source

In your app's CSS file (packages/main-app/src/app.css):

@import 'tailwindcss';
@source '../shared-components/src/**/*.{js,ts,jsx,tsx}';

@theme {
  --btn-icon: #222;
  --btn-bg: #cfcfcf;
  --radius-lg: 0.5rem;
}

The @source directive tells Tailwind where to find classes in other packages.

Multiple packages? Add multiple directives:

@import 'tailwindcss';
@source '../shared-components/src/**/*.{js,ts,jsx,tsx}';
@source '../shared-utils/src/**/*.{js,ts,jsx,tsx}';
@source '../shared-hooks/src/**/*.{js,ts,jsx,tsx}';

@theme {
  --btn-icon: #222;
  --btn-bg: #cfcfcf;
}

Your component now works:

export function Button({ children }) {
  return (
    <button className="text-(--btn-icon) bg-(--btn-bg) rounded-(--radius-lg)">
      {children}
    </button>
  );
}

Tip

This took me 3 hours to figure out. The error message gives you zero indication that classes are missing due to monorepo detection issues.

What Changed

Tailwind	Config	Monorepo Support
v3	JS `content: []` array	Works if you list all paths
v4	CSS `@source` directive	Works if you add `@source`

The path in @source is relative to your CSS file. All theme variables go in @theme.

Note

If you add a new shared package later, you must add another @source directive. Tailwind v4 will not detect it automatically.

References

Tailwind v4 Functions and Directives
Tailwind v4 Installation