@source directive not working in Stackblitz when targeting node_modules

[Powerplex]

What version of Tailwind CSS are you using?

4.1.11

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

"postcss": "8.5.3", "@tailwindcss/postcss": "^4.1.11",

What version of Node.js are you using?

Node v20.19.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://stackblitz.com/edit/stackblitz-starters-wu3sn9fa?file=tailwind.css

Describe your issue

A few months ago this issue was fixed that allowed to use Tailwind v4 in Stackblitz: windlabs/tailwindcss/issues/13133

Unfortunately, it only works for a basic/default tailwind config and comes with a limitation: I cannot parse my design system library (a dependency) using @source (@source './node_modules/@spark-ui';).

The styles are not there for some reason. It has been a pain point for us this whole year because we were using Stackblitz as a bug reproduction environment for our users, and now we simply have no mean to do so (We had no issue with v3).

[thecrypticace]

Notes for me for later:

Running this I get results locally but not on Stackblitz:

await import("@tailwindcss/oxide").then(m => new m.Scanner({ sources: [{ base:process.cwd(), pattern:'node_modules/@spark-ui/components/dist/chunk-USSL4UZ5.mjs', negated:false, }] }).scan().filter(c=>c.includes('bg-info')))

edit: can reproduce in docker locally with @tailwindcss/oxide-wasm32-wasi so don't need to edit directly on stackblitz.

[Powerplex]

@thecrypticace do you know more since you started to look into it ? 🙏

[P1X3L]

Hi there @Powerplex 👋 I had exactly your problem yesterday and struggled many hours to finally figure out it was because your node_modules are in the .gitignore file, or maybe dist folders (or both?).

I'm not saying here that you should remove those from .gitignore file, but it for sure fixes the problem.

I'd be happy to know how to deal with this properly as we are not going to version these folders for sure…

If I understood things correctly, tailwind is avoiding to scan folders that at gitignored to avoid parsing a huge amount of code, and therefore, potentially generating many tailwind classes in the final builded .css file for nothing. Mentioning it specifically with the @source directive should bypass this behaviour though 🤔

And their docs say it works like this https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources … but it clearly doesn't 🤷‍♂️

EDIT:

Ok, I narrowed the problem.

I wanted tailwind to scan a specific component from my design-system. Here is the path of this components 👉 node_modules/design-system/dist/Button.js I was trying to source it in index.css using the following directive @source "../node_modules/design-system/dist/Button.js"

Tailwind clearly explains it should work here 👉 https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources

But it wasn't, here is why:

my .gitignore was including this :

node_modules
dist

The path of my design-system button includes node_modules as well as dist in its path : node_modules/design-system/dist/Button.js

By removing dist inside my .gitignore file, it works!

I guess some behaviour is preventing the @source directive from working if the path contains 2 folders that are ignored, BUT works if there is only one?

This is very hard to understand and might be worth mentioning somewhere, or am I still missing something obvious here?

[endigo9740]

Just chiming in that we're seeing a similar issue for our library Skeleton. We use Stackblitz to create live playgrounds of our library to showcase it working in various frameworks (linked from our homepage). Here's an example for SvelteKit:

https://stackblitz.com/github/skeletonlabs/skeleton-repl-sveltekit?file=README.md

We set the @source path in /src/app.css like so:

@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';

We need the @source to link to our component library package in node_modules. Otherwise our components are presented without styles. See the avatars, progress ring, etc to understand what I mean.

While I appreciate P1X3L's workaround above - this won't work in our use case, where users might opt to fork and continue working on these projects. Removing node_modules from the .gitignore could be very detrimental.

I'm sure the issue is just that the @source is not resolving the @node_modules path correctly, but not sure where this should be pointed to in Stackblitz. I'm going to aim to follow up with Stackblitz's support and see if they can provide any further guidance on this as well.

EDIT

Posted on Stackbliz support - however, given the volume of issues posted (hundreds), I'm not expecting a quick resolution.

https://github.com/stackblitz/core/issues/3440

[P1X3L]

Hi @endigo9740, just wanted to react on your comment. What I've exposed for sure isn't a solution (removing node_modules or dist from .gitignore file)!

Your path @source '../node_modules/@skeletonlabs/skeleton-svelte/dist'; includes both node_modules AND dist

I'm pretty sure your .gitignore has the following:

node_modules
dist

If you remove dist, I think it will work, but yes, not a good solution either.

But since in your case, dist is inside node_modules one could try to give its .gitignore something more precise like :

node_modules
/dist <-- with a slash it means that it only concerns the dist folder that lies next to this gitignore file

Sadly, this precision doesn't work either 🤷‍♂️

It seems that the source directive bypasses the presence of node_modules in gitignore, but if you also have dist (or any other ignored folder) along the way, @source doesn't bypass it.

Can you point your source directive to components in your design system that don't lie in a dist folder? It should work…

In conclusion, I'm only giving more context to tailwind writers rather than solving the problem here …

[Powerplex]

Yes I tried all that:

1. remove both node_modules and dist from the .gitignore (just to test)
2. adding this to my tailwind config to try every possibility:

@import 'tailwindcss';

@import './node_modules/@spark-ui/theme-utils/dist/style.css'; /* spark default theme */

@source 'node_modules/@spark-ui/components/dist/button/index.js';
@source './node_modules/@spark-ui/components/dist/button/index.js';
@source '../node_modules/@spark-ui/components/dist/button/index.js';
@source '../../node_modules/@spark-ui/components/dist/button/index.js';
@source '../../../node_modules/@spark-ui/components/dist/button/index.js';

@source 'node_modules/@spark-ui/components/dist';
@source './node_modules/@spark-ui/components/dist';
@source '../node_modules/@spark-ui/components/dist';
@source '../../node_modules/@spark-ui/components/dist';
@source '../../../node_modules/@spark-ui/components/dist';

@source 'node_modules/@spark-ui/components';
@source './node_modules/@spark-ui/components';
@source '../node_modules/@spark-ui/components';
@source '../../node_modules/@spark-ui/components';
@source '../../../node_modules/@spark-ui/components';

@source 'node_modules/@spark-ui';
@source './node_modules/@spark-ui';
@source '../node_modules/@spark-ui';
@source '../../node_modules/@spark-ui';
@source '../../../node_modules/@spark-ui';

None of the @source seems to work, my button still is unstyled.

https://stackblitz.com/edit/stackblitz-starters-cb6gnad6?file=app%2Fcontent.tsx

EDIT: I just made an insane workaround in the package.json:

 "scripts": {
    "dev": "node ./copy-spark-ui.mjs & next dev",

I just copy the content of the package outside of the node_modules in order for tailwind scan to work. It will do the job until it is fixed but it is ugly.

[endigo9740]

@P1X3L we originally launched with Tailwind v4 support and pointing to the root of the package. But after a lot of testing we realized styles were only consistently being inserted into the bundle when we pointed at /dist. So that was emergency post-launch adjustment to fix an issue users were reporting. We haven't done major testing since then to see if this is still required, but haven't modified it because it doesn't appear to be hurting anything. Then per Stackblitz - yes we tested dropping this first thing. No change.

@Powerplex great to see another work around in your edited post, but unfortunately the goal for us to create a non-tampered repo that works when cloned and ran either via a local server or deployed to a host. Any manual adjustments outside of normal usage would likely trip our users up, leading to a flood of support issues on our end. But it seems this may not be possible.

One thing I was hoping for is we could just adjust the @source path itself. If that was the case we could implement comment blocks in our .css file that denote that configuration A works for Stackblitz and configuration B works for every other environment. With little to no risk of harm to the usage - other than your styles would be off until this swap occurred. But that might be possible here.