Vite: Use Vite resolvers for CSS and JS files

[philipp-spiess]

Closes #15159

This PR extends the @tailwindcss/node packages to be able to overwrite the CSS and JS resolvers. This is necessary as some bundlers, in particular Vite, have a custom module resolution system that can be individually configured. E.g. in Vite it is possible to add custom resolver configs that is expected to be taken into account.

With the new customCssResolver and customJsResolver option, we're able to use the Vite resolvers which take these configs into account.

Test Plan

Tested in the playground by configuring resolver conditions (with Vite 5.4 and Vite 6 beta). An integration test was added for both the JS and CSS resolvers to ensure it keeps working as expected.

[TiBianMod]

Nice to see you working on this PR @philipp-spiess. Thank you 🙏
Will be great if the resolver can resolve also aliases on@source

if you need to test @source

---

create new filesrc/resolve_this_source.css

@source "../src";

add on src/index.css

/* after the imports */
@source "#resolveThisSource";

add alias on vite.config.ts

"#resolveThisSource": fileURLToPath(new URL('./src/resolve_this_source.css', import.meta.url))

[philipp-spiess]

@TiBianMod What's your use case for using these aliases for @source? I'd say @source is a tailwind-only feature so it doesn't really make sense for me to respect bundler specific rewrites, especially especially as it used to resolve to a directory or a glob and not a single file.

[TiBianMod]

@philipp-spiess
OK I see. Ignore my request about the @source for the moment, hehe 😄

[sdalonzo]

This seems related to a problem I'm having with the v4 beta.2 in a Rush/pnpm monorepo. The issue I'm having manifests as a recursion issue:

error during build:
[vite:css] [postcss] Exceeded maximum recursion depth while resolving `tailwindcss/utilities` in `/Users/sdalonzo/github/monorepo/common/temp/node_modules/.pnpm/tailwindcss@4.0.0-beta.2/node_modules/tailwindcss`)
file: /Users/sdalonzo/github/monorepo/design-system/dsnext-tailwind-radix-proto/src/tailwind.css:undefined:NaN

This happens with the Vite plugin and the postcss plugin. I'd be happy to test a build and file a separate issue if it ends up not being related.

Thank you for your hard work on this, I'm excited about getting started with v4

[philipp-spiess]

@sdalonzo If this happens with postcss too, I don't think this is related to this issue I'm afraid. Mind opening up a new issue with a repro case?

One thing from the top of my head is that it seems omit the file extension for the import as it says tailwindcss/utilities not tailwindcss/utilities.css. Could you test if adding the .css extension fixes it? (our v3 => v4 upgrade tool should add the file extension as well)

[sdalonzo]

@philipp-spiess I'm working on a minimal repro since I need it in order to open the issue - it'll just take a little while because i have to recreate the monorepo conditions first.

In the meantime, I'm not sure what you meant by adding the .css extension. My css file has @import 'tailwindcss'; as generated by the upgrade tool, the reference to /utilities seems internal to tailwind.

[philipp-spiess]

@sdalonzo Oh interesting! We'll need to figure out where that import is coming from, because the internal tailwindcss import just maps to a relative .css file: https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/index.css#L5

[sdalonzo]

@philipp-spiess even more frustratingly, my repro passed the build and just has some issues in storybook that are probably solvable. I'm working on adding more until I can reproduce.

[TiBianMod]

excited for the next release 🎉