@tailwindcss/postcss fails to resolve font URLs in external packages with Vite

[janko]

What version of Tailwind CSS are you using?

v4.0.6

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

Vite 6.1.0

What version of Node.js are you using?

v22.12.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction

https://github.com/janko/tailwind-postcss-bug

Describe your issue

The CSS entrypoint imports @fortawesome/fontawesome-free package CSS. When you run npm run build, you'll see errors indicating that font URLs within that CSS have failed to resolve:

../webfonts/fa-brands-400.woff2 referenced in ../webfonts/fa-brands-400.woff2 didn't resolve at build time, it will remain unchanged to be resolved at runtime

../webfonts/fa-regular-400.woff2 referenced in ../webfonts/fa-regular-400.woff2 didn't resolve at build time, it will remain unchanged to be resolved at runtime

../webfonts/fa-solid-900.woff2 referenced in ../webfonts/fa-solid-900.woff2 didn't resolve at build time, it will remain unchanged to be resolved at runtime

../webfonts/fa-v4compatibility.woff2 referenced in ../webfonts/fa-v4compatibility.woff2 didn't resolve at build time, it will remain unchanged to be resolved at runtime

../webfonts/fa-brands-400.ttf referenced in ../webfonts/fa-brands-400.ttf didn't resolve at build time, it will remain unchanged to be resolved at runtime

../webfonts/fa-regular-400.ttf referenced in ../webfonts/fa-regular-400.ttf didn't resolve at build time, it will remain unchanged to be resolved at runtime

../webfonts/fa-solid-900.ttf referenced in ../webfonts/fa-solid-900.ttf didn't resolve at build time, it will remain unchanged to be resolved at runtime

../webfonts/fa-v4compatibility.ttf referenced in ../webfonts/fa-v4compatibility.ttf didn't resolve at build time, it will remain unchanged to be resolved at runtime

This exact same setup works without issues on Tailwind v3, so it seems like a regression in v4.

[janko]

If I switch from @tailwindcss/postcss to @tailwindcss/vite, everything seems to import correctly as well, so it seems like an issue in @tailwindcss/postcss.

Personally I would love to switch to @tailwindcss/vite in our project, but unfortunately we still have quite a lot of Sass code, which the Vite plugin doesn't support.

[DonCamillo11]

Same issue here using vite.

[neapolis79]

If I switch from @tailwindcss/postcss to @tailwindcss/vite, everything seems to import correctly as well, so it seems like an issue in @tailwindcss/postcss.

Personally I would love to switch to @tailwindcss/vite in our project, but unfortunately we still have quite a lot of Sass code, which the Vite plugin doesn't support.

i also had issue with vite plugin. upgrading laravel application with vite, if i use vite plugin i have several compilation error, with postcss plugin works well

[philipp-spiess]

@janko Huh, do you have a setup how this works without the Tailwind PostCSS plugin?

I think that the import to @fortawesome/fontawesome-free/css/all.css might not have been resolved by PostCSS at all (so your bundler would have inlined it but there is no bundler in this repro) or you may have used other PostCSS plugins. In Vite we manually rewrite url imports like this to be relative to the right path but we never did this on the PostCSS side.

What you can try is to change using an @import url(…) instead, this effectively will leave it as-is and @tailwindcss/postcss won't attempt to inline it:

@import url("@fortawesome/fontawesome-free/css/all.css");
@import "tailwindcss";

(Note that it will need to be reordered though since the latter import will expand into CSS)

---

@DonCamillo11 @neapolis79 Do you mind attaching a repro and creating a new issue report? If you're using the Vite plugin this should work since we do url rebasing there.

[janko]

@philipp-spiess I just pushed vite-plugin, v3 and url branches to the repo, which switch to using @tailwindcss/vite, Tailwind v3, and @import url(...) respectively. Font Awesome gets successfully imported with @tailwindcss/vite and Tailwind v3 (without additional changes to the import), and I added an icon to the <body> just to prove that it works. I tried switching to @import url(...) with changed order, but the errors are the same unfortunately, and the icon doesn't get rendered.

I think that the import to @fortawesome/fontawesome-free/css/all.css might not have been resolved by PostCSS at all (so your bundler would have inlined it but there is no bundler in this repro) or you may have used other PostCSS plugins.

I might be misunderstanding, but isn't Vite my bundler here? There is no Vite config in any of the branches other than the @tailwindcss/vite one, but I was using Vite commands defined in package.json (e.g. npm run build), as Vite config seems to be optional.

The Vite build output shows whether fonts were resolved, and I also tested rendering the icon to verify it. This is the successful build:

dist/index.html                                  0.33 kB │ gzip:  0.24 kB
dist/assets/fa-v4compatibility-C9RhG_FT.woff2    4.80 kB
dist/assets/fa-v4compatibility-CCth-dXg.ttf     10.84 kB
dist/assets/fa-regular-400-BjRzuEpd.woff2       25.47 kB
dist/assets/fa-regular-400-DZaxPHgR.ttf         68.06 kB
dist/assets/fa-brands-400-D_cYUPeE.woff2       118.68 kB
dist/assets/fa-solid-900-CTAAxXor.woff2        158.22 kB
dist/assets/fa-brands-400-D1LuMI3I.ttf         210.79 kB
dist/assets/fa-solid-900-D0aA9rwL.ttf          426.11 kB
dist/assets/index-Bvrd1oL8.css                  84.24 kB │ gzip: 27.14 kB

and this is the unsuccessful build (font files are absent):

dist/index.html                  0.33 kB │ gzip:  0.24 kB
dist/assets/index-BTDNxzAb.css  84.14 kB │ gzip: 27.05 kB

[philipp-spiess]

@janko Ah sorry I oversaw Vite here, sorry! 🤦

Thanks for the repro. Will need to look more into it and have to understand what Vite does behind the scenes here so that it works with no Tailwind CSS plugin present 🤔

[DonCamillo11]

@DonCamillo11 @neapolis79 Do you mind attaching a repro and creating a new issue report? If you're using the Vite plugin this should work since we do url rebasing there.

@philipp-spiess please see this issue here
#16700

[walnutjon]

Apologies if this is off topic or caused by a different issue, but this workaround also fixed my problem.

My issue: Vite hot reload fails to pick up changes in SASS files imported into top-level SASS file.

My build is Vite + tailwindcss/postcss. Vite css uses modern-compiler api option.

main.js:
import '@/assets/style.scss'

style.scss:

    @use "tailwindcss";
    @use "main.scss";

If I change a style in main.scss, Vite pushes a hot-reload of style.scss (which inlines main.scss), but it doesn't include the changes. If I npm run dev from scratch the changes are included.

Things which worked: Using url for import:
@import url("@/assets/main.scss");

Things I've tried:

• Rolling back Vite, TailwindCSS to 4.0.0
• @import "main.scss" instead of @use
• variations of paths to main.scss in case of some weird relative path issue

[mirite]

Having the same issue with Webpack and postcss-loader. When the @tailwindcss/postcss plugin is included, imported CSS files from node_modules get inlined without bringing their assets with them.