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

[DonCamillo11]

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.1

What version of Node.js are you using?

v22.13.0

What browser are you using?

Safari

What operating system are you using?

macOS

Reproduction URL

https://github.com/DonCamillo11/tailwind-bug

Describe your issue

I try to import fontawesome pro in my app.css. When running npm run build I get the following errors:

../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-duotone-900.woff2 referenced in ../webfonts/fa-duotone-900.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-light-300.woff2 referenced in ../webfonts/fa-light-300.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-duotone-900.ttf referenced in ../webfonts/fa-duotone-900.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-light-300.ttf referenced in ../webfonts/fa-light-300.ttf didn't resolve at build time, it will remain unchanged to be resolved at runtime

It was working with Tailwind v3

but after updating my Laravel application to Tailwind 4 there seem to be a problem building the files.

[wongjn]

Git patch to get the reproduction to run properly:

diff --git a/app.css b/app.css
index 4dddaa0..f022ffc 100644
--- a/app.css
+++ b/app.css
@@ -1,18 +1,10 @@
-@import '@fortawesome/fontawesome-pro/css/fontawesome' layer(base);
-@import '@fortawesome/fontawesome-pro/css/brands' layer(base);
-@import '@fortawesome/fontawesome-pro/css/duotone' layer(base);
-@import '@fortawesome/fontawesome-pro/css/regular' layer(base);
-@import '@fortawesome/fontawesome-pro/css/solid' layer(base);
-@import '@fortawesome/fontawesome-pro/css/light' layer(base);
+@import '@fortawesome/fontawesome-free/css/fontawesome' layer(base);
+@import '@fortawesome/fontawesome-free/css/brands' layer(base);
+@import '@fortawesome/fontawesome-free/css/regular' layer(base);
+@import '@fortawesome/fontawesome-free/css/solid' layer(base);
 
-@import '../../vendor/wire-elements/pro/resources/css/tailwind/overlay-component.css'
-  layer(base);
-@import '../../vendor/wire-elements/pro/resources/css/tailwind/insert-component.css'
-  layer(base);
 @import 'tailwindcss';
 
-@config '../../tailwind.config.js';
-
 
 @layer base {
   *,
diff --git a/package.json b/package.json
index ef8ea4f..ff3f4d7 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
         "vite": "^6.0.0"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-pro": "^6.6.0",
+        "@fortawesome/fontawesome-free": "^6.6.0",
         "@fullcalendar/moment": "^6.1.15",
         "flatpickr": "^4.6.13",
         "fullcalendar-scheduler": "^6.1.15",
diff --git a/vite.config.js b/vite.config.js
index 5b72368..bc65573 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,8 +6,7 @@ export default defineConfig({
     plugins: [
         laravel({
             input: [
-                'resources/css/app.css',
-                'resources/js/app.js',
+                'app.css',
             ],
             refresh: true,
         }),

[philipp-spiess]

@DonCamillo11 Thanks for setting this up, the repro is really good and helpful! You were right though that is the same issue when you said you're using "Vite" I thought this happens for you using the Vite integration but you are indeed also using the PostCSS extension. Going to merge this back into the other issue I just sent you from 😬 Sorry!

[DonCamillo11]

@philipp-spiess sorry, my fault 🙇

[philipp-spiess]

@DonCamillo11 Nah that's on me, thank you for providing the repro!

[gregsullivan]

@philipp-spiess I have an issue that feels directly related to this one, but I was hoping to run it by you to get a sense of whether I should open another issue, provide my own reproduction here, etc. My situation is as follows:

• I set up my project initially with the Tailwind CLI.
• I needed to use postcss-nesting due to client requirements.
• I switched to PostCSS via @tailwindcss/postcss.
• All relative font URLs are rewritten to absolute URLs relative to the input CSS file.

My file structure has src and public folders, and the @font-face entries in ./src/fonts.css look something like this:

@font-face {
	font-family: "Source Code Pro";
	src:
		url("fonts/sourcecodepro-regular.woff2") format("woff2"),
		url("fonts/sourcecodepro-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

(fonts.css is imported into ./tailwind.css.)

The actual font files are in ./public/fonts/. This worked fine with the Tailwind CLI, but with @tailwindcss/postcss, this gets updated in ./public/style.css to:

@font-face {
	font-family: "Source Code Pro";
	src:
		url("./src/fonts/sourcecodepro-regular.woff2") format("woff2"),
		url("./src/fonts/sourcecodepro-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

I saw in #16636 you said this:

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.

From that it sounds like these url() values shouldn't be rewritten, but I was hoping you could lend some clarity as far as that goes.

Thanks for all your work on this—much appreciated!

[gregsullivan]

Sorry, @philipp-spiess — after rereading everything today, I now understand that this behaviour is intentional, via #16965.

Would you be open to a pull request allowing shouldRewriteUrls to be set to false via a plugin option?