[v4] Usage of `@tailwindcss/postcss^4.0.0-alpha.25` with `svelte-preprocess` for svelte file with style tag: problematic dependency scanning

[vnphanquang]

Version

@tailwindcss/postcss^4.0.0-alpha.25 & tailwindcss^4.0.0-alpha.25, i.e all versions of v4 alpha from 25 to 33 (as of this writing).

Environment

Output of npx envinfo --system --binaries --browsers --npmPackages "{svelte,@sveltejs/*,vite,tailwindcss,@tailwindcss/postcss}":

  System:
    OS: Linux 6.6 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz
    Memory: 6.01 GB / 15.57 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 22.11.0 - ~/.volta/tools/image/node/22.11.0/bin/node
    npm: 10.9.0 - ~/.volta/tools/image/node/22.11.0/bin/npm
    pnpm: 9.12.3 - ~/.volta/bin/pnpm
  Browsers:
    Chromium: 130.0.6723.116
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1
    @sveltejs/kit: ^2.0.0 => 2.8.0
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.0
    @tailwindcss/postcss: 4.0.0-alpha.25 => 4.0.0-alpha.25
    svelte: ^5.0.0 => 5.1.15
    tailwindcss: 4.0.0-alpha.25 => 4.0.0-alpha.25
    vite: ^5.0.3 => 5.4.11

Reproduction

https://github.com/vnphanquang/sveltekit-tailwind-4-reproduction. Please see README for steps.

Description

Note

Please note that tailwind is being used as a postcss plugin here, reported issue is not observed when using vite plugin.

In the reproduction, any svelte file with a style tag will cause the following two warnings from svelte-preprocess during both dev and build:

[vite-plugin-svelte] [...truncated_path...]/*.svelte svelte.preprocess returned this file as a dependency of itself. This can be caused by an invalid configuration or importing generated code that depends on .svelte files (eg. tailwind base css)

There have been instances where similar warning was observed: sveltejs/svelte-preprocess#619, sveltejs/svelte-preprocess#346. But I don't exactly know what is causing this now. I'm guessing parsing style tags calls for parsing Tailwind entry css, which in turns requires parsing all matching source files 🔄.

---

[...truncated_path...]/*.svelte svelte.preprocess depends on more than 10 external files which can cause slow builds and poor DX, try to reduce them. Found: [list_of_all_source_files_except_raster_images]

Similarly, this is causing a lot of parsing during dev. In our real project with lots of such svelte files, the server quickly crashed with Maximum Call Stack Size Exceeded.

Use case

Hi all thanks for the good work, Tailwind 4 has been really good and I'm trying to test it out on some existing v3 projects with relatively complex setup. In our case we use tailwind as a postcss plugin because we also rely on some other postcss plugins (mixins, custom properties, custom media queries). We tried to use tailwind as vite plugin which works well in dev but the plugins do not apply during production build.

[philipp-spiess]

@vnphanquang We can look into the warning but it's going to be hard to make sure all of Tailwind CSS is within 10 external files. This whole number sounds like a very arbitrary limit though. However, we can investigate!

The stack exceed seems unrelated to this. Having more dependencies does not mean the stack will grow unbound. Do you have a trace for what's causing the stack to go up? Any symbols to figure out what's causing the recursion would be super helpful!

[vnphanquang]

@vnphanquang We can look into the warning but it's going to be hard to make sure all of Tailwind CSS is within 10 external files. This whole number sounds like a very arbitrary limit though. However, we can investigate!

The stack exceed seems unrelated to this. Having more dependencies does not mean the stack will grow unbound. Do you have a trace for what's causing the stack to go up? Any symbols to figure out what's causing the recursion would be super helpful!

@philipp-spiess thanks for replying. Yeah I suspect this is very tightly coupled with how svelte-preprocess works. 10 is set by the Svelte team as an indicator of potentially problematic setup, hence the warning, but it is arbitrary indeed. However, the emitted dependency file list contains almost all source files in the project, including svg assets. I omitted the full list in the report because it is long, you can give it a look by running pnpm build.

So if I have a total of 100 source files (ts,js,json,svg,svelte,...), and 10 svelte files with style tag, there will be at least 100*10 times parsed. The emitted dep list in the build output for each of the 10 said svelte files will be equally 100. I have little knowledge of the internals of svelte-preprocess or tailwind but that doesn't seem like it's detecting true dependencies for those svelte files.

I've been digging (and will continue to) but up til now there isn't any other symbol that led to the observed output. As long as the svelte file contains a style tag, the first warning will print. And as long as the total of compatible source files are above 10, the second one will do. Regarding the stack exceeding, yeah you're right, it might not be direct causation but perhaps some correlation at least. Will keep an eye on it.

I wonder how v4 is different than v3 in its postcss implementation, especially since I never observed such issue in v3 : 🤔

Optimally, now that v4 makes very good use of custom properties, I wish there were an escape hatch to avoid svelte style tag being processed by tailwind at all. In our v4 setup all tailwind goodies are in CSS files.

[philipp-spiess]

@vnphanquang Thanks! did not look into this in detail yet but one thing I saw in your repro is that you're using Tailwind as a postcss plugin instead of the Vite plugin. Now, we currently have an issue in the current version of the Vite plugin (fixing it here) but once this is resolved, it would be awesome if you can help try this instead. We do think that all Vite setups (including SvelteKit) would greatly benefit from using the Vite plugin instead of the postcss one, since it's much faster in development as it needs to scan much less modules for potential classnames.

[vnphanquang]

@vnphanquang Thanks! did not look into this in detail yet but one thing I saw in your repro is that you're using Tailwind as a postcss plugin instead of the Vite plugin. Now, we currently have an issue in the current version of the Vite plugin (fixing it here) but once this is resolved, it would be awesome if you can help try this instead. We do think that all Vite setups (including SvelteKit) would greatly benefit from using the Vite plugin instead of the postcss one, since it's much faster in development as it needs to scan much less modules for potential classnames.

Thanks @philipp-spiess. I will definitely give it a try. In fact, as I stated in the issue description, I would too prefer the Vite plugin but to reiterate we're relying on some postcss plugins which work well with tailwind in dev, but do not apply to the tailwind related css files during production build for some reason. Will look into it some more.

[philipp-spiess]

@vnphanquang Hey! Me again :) We pushed another alpha release yesterday that contains the updates to the Vite plugin that I mentioned above. Would be really cool if you could give that a try over the postcss extension 👍 You're still able to use postcss plugins with the Tailwind CSS Vite plugin, it just gives Tailwind a bit more control as we're able to process the CSS before other plugins see it (and it allow us to avoid having to scan the file system because of how the Vite module graph works)

[vnphanquang]

@philipp-spiess thanks. Gave the latest alpha release a try (4.0.0-alpha.34), and still having the same problem I described earlier. I've put together a minimal repro here: https://github.com/vnphanquang/tailwind-4-alpha-postcss-plugins-reproduction. This is a completely different problem so I'm happy to open another issue, but related here as this is essentially the reason blocking me from using the Vite plugin, hence the use case for using Tailwind as a PostCSS plugin.

[vnphanquang]

@philipp-spiess Still happening in beta.1 FYI.

I'm having another problem where if app A imports some tailwind css from package B that uses a plugin C. That is A imports B, B imports C. I'll get this:

[vite:css] [postcss] Can't resolve 'plugin-C' from ...

This is when using tailwind as a postcss plugin in Vite context. Reproduction is here: https://github.com/vnphanquang/tailwind-4-postcss-deep-plugin-reproduction. Again. I'm happy to open a separate issue, just let me know. Thanks a lot for the work good.

[philipp-spiess]

@vnphanquang Heya! Just wanted to let you know that as of the latest beta version, we don't hook into the svelte preprocessor at all anymore and rely on simpler vite transforms. Do you mind testing your setup again and letting us know if anything doesn't work still? Thanks a bunch!

[RobinMalfait]

Hey!

Going to close this issue because this should all work as expected now. For people running into this issue, make sure you are on the latest version and follow the @reference docs: https://tailwindcss.com/docs/functions-and-directives#reference-directive

Hope this helps!

[vnphanquang]

Thanks everyone. Sorry for not being able to check back in earlier. Been using the vite plugin instead and it's working well.