@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/@[email protected]/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)

[philipp-spiess]

Gotcha! Yeah the module graph scanner was awesome when it worked, I totally agree, but it also subtly didn't work for a loot of users so we unfortunately had to pull the ripcord on that approach. I worry that when we make it opt-in, people will still run into these issues once they publish their apps to production and then have similar issues when they need to migrate away from it.

Conceptually, I think that having one npm package being able to read (or suggest sources) for other packages without any form of dependencies does not seem like an ideal abstraction anyway. You wouldn't be able to expect this from any node module either.

In your repro, unfortunately, this means you have to be super explicit and add @source "../node_modules/@ialdama/tailwind-button/dist";. Another idea is to export a .css file for each component that adds the @source.

I also saw that your individual packages are already compiled already and that the @ialdama/tailwind-button package ships resources in a dist/ folder. We recommend scanning the source files before any compilation since that's how our scanner was optimized. I understand that it's a bit unfortunate in your setup since you do not have all the files in the repo, so I think an approach where every dependency declares it's dependencies individually with a custom .css export might be best.

Regarding the repro: Of course I forgot to look at the version, sorry about that!

I also converted this to a discussion since it's "working as expecting" from our side but I definitely want to keep this conversation open to see how we can improve the situation. I left a bit more context about this change in this comment as well.

[itaymendel]

hi! how would you recommend sharing TW configs across teams? having a versioned dependency provides a high degree of control for us.
if you make this feature "opt in", then only people that enable it will hit issues, but they are taking the risk on themselves.

[cvlmtg]

@philipp-spiess Hi Philip, sorry for the delay. Here's a zip with our project stripped down to the (hopefully) bare minimum to replicate the problem. it's a monorepo with the code for our app which can be customized and built for different customers, so the structure of this example might seem strange (like that css with a single import and nothing else) but that's what we need and that worked up until 4.0.7

in the package.json the tailwind version is 4.0.7, run npm install and then npm run watch, open the browser on localhost:8999 and you should see a couple of elements with a couple of colours.
if you change tailwind version to 4.0.9, reinstall modules and run the app again, you'll see some styles missing.

repro.zip

[wongjn]

It seems like the regression you are experiencing is due to #16631 that was released in v4.0.8. In essence, the change means that Tailwind only scans files using the file system and doesn't look through the code through Vite's module graph anymore.

Practically, this means in your project, you'd need to use the @source directive to tell Tailwind to scan the code of your library packages. You could add these directives in each of the library's CSS files, so that the consumer project doesn't need to "know" about them.

[cvlmtg]

Practically, this means in your project, you'd need to use the @source directive to tell Tailwind to scan the code of your library packages. You could add these directives in each of the library's CSS files, so that the consumer project doesn't need to "know" about them.

Hi @wongjn, looks like I still have some problems...

Given this directory structure:

foobar/
  src/
    components/
      etc...
  styles/
    index.css

I've added @source "../src/components"; to every index.css in my monorepo, but there are still styles missing... what's strange though, is that it seems only arbitrary values are missing, e.g. if my class is "w-[36px] h-[36px] rounded-full", rounded-full is styled, but every *-[123px] is not.

[raffidahmad]

I'm experiencing the same issue, though im using vite and npm
Version 4.0.7 is fine but anything above breaks the css

[cvlmtg]

any news on this issue? I just tried tailwind 4.1.1 and the bug is still there.

[raxelo]

Still happening on 4.1.4

[philipp-spiess]

Mind sharing a minimal reproduction for the issue you're having?

[cvlmtg]

Mind sharing a minimal reproduction for the issue you're having?

@philipp-spiess if you are talking to me and not raxelo, mine is here: #16958 (comment)

[jaydeep987]

Just in case if anyone is struggling with pnpm-nextjs-tailwind setup. I had similar kind of issue, using tailwind v4.1.5. I am using pnpm workspaces and having one app and one package called UI. The ui package had all shared ui components using tailwind again. And using those components in my app. BUT, the tailwind was recognizing classNames from my app only not from ui package, and so the final global.css didn't have all required classes.

What worked for me was to set base url with source in app's global.css , in this way : @import "tailwindcss" source("../../../../");
So set tailwind base path to root of repo, as its mentioned in docs , worked for me. Altho I do not like to use such relative paths, but for now it looks good.

Hope it helps to someone!

[elv1n]

The issue persist in @tailwindcss/vite 4.1.12, works in 4.0.7.

[LanceMoe]

Does anyone have a solution to this problem? I'm stuck on version 4.0.7.

[rozsazoltan]

You might be interested in:

• All components from the UI package are included in the project's generated CSS, but I don't use every component
• Shipping a UI package alongside projects in a monorepo