[4 alpha] breaks the default Vite `url(...)` references in imported CSS files.

[slavarazum]

What version of Tailwind CSS are you using?

For example: alpha.29 (latest)

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

For example: Vite 5.4.10 (latest)

What version of Node.js are you using?

For example: v20.9.0

What browser are you using?

Mainly Safari, however it's not related to the issue 🙃

What operating system are you using?

MacOS

Reproduction URL

https://github.com/slavarazum/tailwind4-alpha-vite/

Describe your issue

Vite provides @import inline and rebasing for CSS.
I'm trying to import font from the Fontsource library: https://fontsource.org/fonts/nunito which references font files using url(...).

As a result we have such rebased urls:

After installing Tailwind, importing it, and enabling the Vite plugin, the URLs remain with the default related paths:

[philipp-spiess]

@slavarazum Thanks for the report! We'll look into it. You can work around this for now by using the @tailwindcss/postcss client rather than the Vite client which should preserve the existing logic.

[slavarazum]

Wow, Tailwind team are really quick nowdays :)
Thanx for the suggestion, have already temporary migrated.

[philipp-spiess]

@slavarazum Hey! We just merged a fix for this which will be part of the next alpha release. Thanks again for reporting this and please let us know if you have any more issues 🙂