Shadcn monorepo and tailwind @source directives

[gavrya]

Hi all!

I am trying to understand a Shadcn monorepo setup and how the Tailwind detects which files to scan in both repos.
I created a new fresh monorepo according to this instruction: https://ui.shadcn.com/docs/monorepo.

I have this setup:

Everything works great. Build works.

But I dont understand why this file packages/ui/src/styles/globals.css has these @source directives with only 3 relative parent lookups? It should use 4 relative parent lookups to reach the repo root dir.

@import "tailwindcss";
@source "../../../apps/**/*.{ts,tsx}";
@source "../../../components/**/*.{ts,tsx}";
@source "../**/*.{ts,tsx}";

When I run web repo build script it imports "@workspace/ui/globals.css" which points to the packages/ui/src/styles/globals.css file and Tailwind will start process it. Tailwind will process those @source directives and they will be resolved to:

@source "../../../apps/**/*.{ts,tsx}" -> packages/apps/**/*.{ts,tsx} which does not exist.
@source "../../../components/**/*.{ts,tsx}" -> packages/components/**/*.{ts,tsx} which does not exist.

@source "../**/*.{ts,tsx}" -> src/**/*.{ts,tsx} which exists and make sense (scan all files in @workspace/ui package).

I also added my custom tw class <h1 className="h-[15546335px]">Hello World</h1> in the apps/web/app/page.tsx and it built it correctly even if I remove these directives from the packages/ui/src/styles/globals.css:

@source "../../../apps/**/*.{ts,tsx}";
@source "../../../components/**/*.{ts,tsx}";

It seems that Tailwind just use default behaviour and scans the @workspace/web package src by default with or without those invalid @source directives.

Correct me if I am wrong.

[Tiimie1]

great catch, you are indeed right. with tailwind v4 they announced automatic content detection

Automatic content detection — all of your template files are discovered automatically, with no configuration required.

[Tiimie1]

major v4 changes from their blog post... https://tailwindcss.com/blog/tailwindcss-v4