@tailwindcss/vite@^4.0.8 is not able to find classes from component based config and components

[nachoaldamav]

What version of Tailwind CSS are you using?

v4.0.9 (4.0.7 works fine)

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

• Vite 6.2.0

What version of Node.js are you using?

v22.13.1

What browser are you using?

Chrome

What operating system are you using?

Debian (WSL2)

Reproduction URL

https://github.com/nachoaldamav/tailwind-debug-4.0.9

Describe your issue

With the change from the PR #16631 loading config files and component as packages break the candidates search.

Key points

• The config file (css) is loaded from @my-org/tailwind-config/styles.css.
• A button component loaded from @my-org/button.
• Theorically, using @source "../node_modules/@my-org/button would fix it, but it doesn't.
• This could be caused by pnpm node_modules structure, as the config file is not loaded from node_modules/@my-org/tailwind-config/styles.css, but from node_modules/.pnpm/@my-org+tailwind-config@1.0.0/node_modules/@my-org/tailwind-config/styles.css.
• About pnpm, it means that @source needs to be ../../../../../@my-org/button/dist which is not very reliable.

I think re-opening this PR (#16425) could fix this issue, maybe making the default be the FileSystem one and optionally the Module Graph system.

[cvlmtg]

I have the same problem. the upgrade from 4.0.7 to 4.0.8 or 4.0.9 broke everything. We are using npm instead of pnpm and macOS instead of Linux, but the issue is the same.

[philipp-spiess]

@nachoaldamav Hey! If I understand you correctly you want one npm package @my-org/tailwind-config to configure an @source to all other npm packages of your org, however that npm package does not appear to have any other dependencies: https://www.npmjs.com/package/@ialdama/tailwind-config?activeTab=code

pnpm does indeed move things around with the core assumption that @my-org/tailwind-config will only have access to the node_modules/ that it also defines as dependencies (or peer dependencies). Since Tailwind is just following that module resolution algorithm, I think this is kind-of expected because why would you be able to map @source files to other npm packages if the package.json doesn't define any dependencies.

So I think there's two options to making this work:

1. Add @source '../node_modules/@my-org/' to the project that imports @my-org/tailwind-config. Since this project uses dependencies like @my-org/button and thus has a hard-dependency on it.
2. Add peer dependencies to the @my-org/tailwind-config package. This will force pnpm to set up the node_modules/ folder inside the @my-org/tailwind-config folder. So your source rule can change to @source './node_modules/@my-org'.

I was trying to look at your repro to confirm that these indeed fix the issue but for me (using pnpm 10.5.2) the button seems to work fine but I may be missing somethign:

---

@cvlmtg Mind sharing a reproduction of your setup so we can take a look?

[nachoaldamav]

@philipp-spiess Hi, yes, you are correct, the config does not have dependencies because in my setup (I had to simplify it so you could debug it) this will cause a cyclic dependencies issue (in short config > component > config).

I think the Module Graph scanner was a huge feature that eases this stuff by not needing to explicitly set a @source or adding dependencies to the config package. I understand the issues that come from it, so I think setting this as optional will fix both previous issues and this type of issues.

About the reproduction, it's explained in the readme, these are the steps:

1. run pnpm dev, open the preview a check that the button is loading with Tailwind styles applied.
2. in the package.json, replace "@tailwindcss/vite": "4.0.7" with "@tailwindcss/vite": "4.0.9" and run pnpm i.
3. run pnpm dev, now the button does not have styles applied.

---

edit: for context, the config would work as a shareable config, I'm not thinking about it to register components paths, but for the styling, plugins, etc... I think the way to see it is that in my setup every component acts as a standalone app (for previews, like Storybook)