@source directive does not glob across symlink directories

[borama]

The @source directive does not work when it contains a glob matching a symlink. It is a problem when we need to source a symlink directory that is versioned.

What version of Tailwind CSS are you using?

4.0.7

What build tool (or framework if it abstracts the build tool) are you using?

none

What version of Node.js are you using?

23.8

What browser are you using?

n/a

What operating system are you using?

Linux

Reproduction URL

https://github.com/borama/tw4-symlink-glob

Reproduction steps:

1. benchmark test - globbing a real directory name (works OK)

$ cat input.css
@import "tailwindcss" source(none);
@source "ab*/*.html";

$ tree
.
├── abcd
│   └── xyz.html
└── input.css

$ cat abcd/xyz.html
<div class="bg-red-100">Hi</div>

$ tailwindcss -i input.css | grep bg-red-100
≈ tailwindcss v4.0.7

Done in 19ms
  .bg-red-100 {
# the class has been added

2. trying to glob a symlink name (does NOT work)

$ ln -s abcd efgh

$ tree
.
├── abcd
│   └── xyz.html
├── efgh -> abcd
└── input.css

# amend input.css to glob the symlink instead
$ cat input.css
@import "tailwindcss" source(none);
@source "ef*/*.html";

$ tailwindcss -i input.css | grep bg-red-100
≈ tailwindcss v4.0.7

Done in 19ms
# the class has not been added

Describe your issue

When the glob pattern in the @source directive matches a directory name that is a symlink, Tailwind does not recognize it as a match and does not source the files inside it. This is a problem when a dependency that we want to source is versioned and symlinked (think efgh-3.4.123 in the test above) and we don't want to update the source whenever we upgrade the dependency.

Might be related to #16038 but I came across it in the context of ruby gems and this might be rather about the suffix * matching than symlinked directory traversal.

[arieroos]

I have the same issue. I had to specify the exact path to the link in order to get Tailwind to pick up classes in the linked folder. The symlink is inside my current working directory, so I was expecting Tailwind to automatically pick up those files as per the documentation here: https://tailwindcss.com/docs/detecting-classes-in-source-files

After an hour or so of trying to find the solution with Google searches and discussions with LLM's, I decided to log an issue, but luckily I found this issue when I tried to make sure my issue hasn't been logged already. So I got a solution to my problem.

My setup is like this:

❯ ls -lah src/components/common                 
lrwxrwxrwx 1 arie arie 28 Mar 14 11:19 src/components/common -> ../../../../solid-components

And in src/app.css I now have:

@import "tailwindcss";

@source "./components/common/*.tsx";

And I can find the classes in my symlinked directory:

❯ npx tailwindcss -i src/app.css | grep z-40
  .z-40 {
≈ tailwindcss v4.0.14

Done in 56ms

Keep in mind that my linked folder is flat. I am not sure whether it will work for sub-folders in the linked folder.

---

However, if I leave out the @source directive:

@import "tailwindcss";

/* @source "./components/common/*.tsx"; */

I can't find the classes anymore:

❯ npx tailwindcss -i src/app.css | grep z-40
≈ tailwindcss v4.0.14

Done in 34ms

I think this problem might be related to the one @borama experienced.

---

Also, to confirm the issue @borama logged. If I have this in src/app.css:

@import "tailwindcss";

@source "./components/com*/*.tsx";

I also can't find the classes in the linked directory:

❯ npx tailwindcss -i src/app.css | grep z-40
≈ tailwindcss v4.0.14

Done in 39ms

[arieroos]

I got subfolders inside the linked directory to work like this:

@import "tailwindcss";

@source "./components/common";