Upgraded to Tailwind v4? Have a pnpm monorepo with components in packages/shared-components and your app in packages/main-app? You'll see utilities from shared components aren't generating.

What you see in the browser:

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

The classes don't exist. Raw function syntax just sits there.

Why It Breaks

Tailwind v4 moved configuration from JS to CSS. The old tailwind.config.js with content: paths? Ignored now.

The new automatic detection only scans inside your own package. It doesn't 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;
}

That's it. The @source directive tells Tailwind where to find classes in other packages.

You can add multiple @source directives if you have more packages:

@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>
  );
}

Took me 3 hours.

What Changed

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

References

Tailwind v4 Functions and Directives
Tailwind v4 Installation