[bug]: Tailwind 4 classes missing when using shadcn from monorepo

[viveleroi]

Describe the bug

I've been updating our relatively new monorepo to use Tailwind 4 and I followed their upgrade docs as well as the shadcn docs. I've updated the versions, reinstalled shadcn components, adjusted our globals.css file per the docs, etc. I don't believe I've missed anything. Our monorepo setup very closely mirrors the shadcn monorepo example that's generated via the shadcn CLI.

However, when I run our apps, it seems like tailwind is not detecting the classnames shad/twMerge/etc are generating. For example, a destructive button is completely invisible because the text is white but the bg-destructive is nowhere to be found in the generated css.

Once I added a hard-coded example to our app, not via shad components, the tailwind file detected it and updated.

I'm not sure where to look to figure out why tailwind isn't detecting all of the classes from shadcn components.

Affected component/components

Button, Card, etc

How to reproduce

1. Update the shadcn monorepo generated via CLI to tailwind v4

Codesandbox/StackBlitz link

No response

Logs

System Info

Windows 11, Node 21

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[viveleroi]

I was at least able to solve it by re-adding a tailwind config file and specifying the ui package content.

globals.css:

@import 'tailwindcss';
@config "../../tailwind.config.ts";

tailwind.config.ts:

import type { Config } from 'tailwindcss'

const config = {
  content: ['./src/**/*.{ts,tsx}', '../../apps/**/*.{ts,tsx}']
} satisfies Config

export default config

[JoshuaS98]

In packages/ui/globals.css, you can add the @source directive to add sources that tailwind should consider while generating utility classes.