No classes generated in monorepo setup with Yarn PnP

[Wroud]

What version of Tailwind CSS are you using?

v4.0.8 / v4.1+

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

Vite 6.1+

What version of Node.js are you using?

v22

What browser are you using?

Chrome latest

What operating system are you using?

macOS

Reproduction URL

https://github.com/Wroud/tailwindcss-yarn-pnp

Describe your issue

I think that this problem is because yarn pnp doesn't use real file system paths, insted it will be something like:

/Users/user/Documents/working-repo/.yarn/__virtual__/@wroud-vite-plugin-playground-virtual-7ef94fc781/1/packages/@wroud/vite-plugin-playground/src/app/components/Layout.css

@source also doesn't work (before v4.1 version it's possible to use absolute paths, but they also not work after v4.1)

this setup works well on 4.0.7 version and broken after 88b762b#diff-00d01a2d38f5f4253651cf9811eab1182c96f0307e78c567b803416e24b98165

[bjornars]

I can confirm that this monorepo (using vike, but also reproed with vanilla vite) setup is also broken using npm workspaces. It works when reverting to 4.0.7

https://github.com/bjornars/vike-tailwind-workspace-repro

[Wroud]

@bjornars probably you can try to use @source directive https://tailwindcss.com/docs/functions-and-directives#source-directive

https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path

[bjornars]

@bjornars probably you can try to use @source directive https://tailwindcss.com/docs/functions-and-directives#source-directive

https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path

Thanks, that worked 👍 Sorry for derailing your issue.

[wongjn]

I think this may be due to #16631 that was released in v4.0.8. This PR changes the Vite such that it changes the Tailwind class scanning from using Vite's module graph code to using the file system.

With my machine configuration, I don't have corepack. However, using yarn 4.6.0 I was able to replicate your issue and also fix it in packages/dep/src/index.css:

 @import "tailwindcss" prefix(twp);
+
+@source "./";

The commands I ran:

$ yarn
$ yarn workspace vite-bundle run dev

Before	After

Does the aforementioned change help you at all @Wroud?

[Wroud]

@wongjn hmm, yes it works in provided repo, but as i can see it's not reproducing issue correctly, because in vite log i see real path instead of virtual:

1:36:11 PM [vite] (client) hmr update /@fs/Users/wroud/Documents/personal/tailwindcss-yarn-pnp/packages/dep/src/index.css

i need to check what the difference between this minimal repo and my project

[Wroud]

in my real project i see path like this:

1:34:51 PM [vite] (client) hmr update /@fs/Users/wroud/Documents/personal/foundation/.yarn/__virtual__/@wroud-vite-plugin-playground-virtual-8733499182/1/packages/@wroud/vite-plugin-playground/src/app/components/Layout.css?direct

[Wroud]

i found, that in my project yarn makes some"virtual" thing for some packages,
in provided repo there is no "virtual" (still searching how to reproduce this)

https://yarnpkg.com/advanced/pnp-spec#virtual-folders

[Wroud]

okay, i've managed to reproduce it, so if package has peerDependencies then it will be resolved under "virtual" folder
i've updated reproduction repository

[Wroud]

now i'm also worried that because of scanning based on file system there might be cases when classes will not be picked up in vite virtual modules (that is quite often used in vite plugins)

[philipp-spiess]

Hey! Yeah AFAIK Yarn PnP requires monkey patches of core APIs but since these can only patch the Node.js env and we do some calls from within the Rust native extension, this might not work. I don't think this is something we can solve at the moment without making it much slower for everyone else (since basically we'd need to pipe every IO back to the single JS thread that Yarn has patched...). You might have more success with the WASM build (which uses node napi APIs and thus I/O is on the main JS thread) but that has some known issues with macOS too IIRC (you will find some info in the PR from me that added it).

I'm (genuinely) curious if you feel like Yarn PnP provides you much value these days?

now i'm also worried that because of scanning based on file system there might be cases when classes will not be picked up in vite virtual modules (that is quite often used in vite plugins)

Yeah we can't scan Vite virtual modules but these usually have input files that they use to get their content setup anyways. Note that Tailwind is about scanning the template files and not necessarily the build point or runtime. I agree that it might be unexpected though but it's a ripcord we had to pull since the module-graph only implementation had many subtle impossible-to-fix-otherwise issues I'm afraid :(

[Wroud]

I'm (genuinely) curious if you feel like Yarn PnP provides you much value these days?

We have a specific setup where we use workspaces that don't have a common parent.

For now, yarn pnp is the only solution that works for us (it also has a lot of problems like this one, but we can manage most of them)

thank you, i will look at WASM build, but for now we can use v4.0.7 version