@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?

[Bhavdeep-Sai]

Hi @DonCamillo11,

Thank you for providing a detailed report and a reproduction repository.

Confirmed with Font Awesome Free

I replaced @fortawesome/fontawesome-pro with @fortawesome/fontawesome-free (version 6.5.1), and correctly updated the app.css import paths.

• Fonts like fa-brands-400.woff2 and other font files are not being resolved correctly.
• The build logs indicate that url(...) references are being left as-is and resolved at runtime.

I updated the app.css import paths in vite.config.js. However, I still encountered the same issue during the build:

Additionally, I encountered the following errors due to the absence of Pro-only files like duotone.css and light.css in the free version. After removing those imports, the build proceeds but still doesn't resolve the font URLs.

Here's a summary of what I tested:

• Font Awesome Free (6.5.1) for CSS files: fontawesome, brands, regular, solid.
• Tailwind CSS (v3.4.1).
• Vite (v6.2.6) for production build.

This suggests that the issue isn’t tied to the Pro version, and it may be a bug with how Vite or Tailwind CSS handles relative url() references in external CSS files.

[inkstak]

@gregsullivan Same situation, we used to rely on Rails to serve static assets such as fonts & images.
All our url() are now wrong.

Did you find a workaround ?

[gregsullivan]

@inkstak This is far from an ideal solution, but I've been using postcss-url to strip the paths now added by @tailwindcss/postcss:

'postcss-url': {
	url: function (asset) {
		const prefixesToStrip = [
			'./tailwind/custom/components/',
			'./tailwind/custom/',
			'./tailwind/',
		];

		for (const prefix of prefixesToStrip) {
			if (asset.url.startsWith(prefix)) {
				return asset.url.replace(prefix, '');
			}
		}

		return asset.url;
	},
},

It should be possible to dynamically populate prefixesToStrip based on the directory structure of your source CSS files.

I was going to write up a proposal for allowing shouldRewriteUrls to be set to false via a plugin option; want me to tag you when I add that discussion?

[gregsullivan]

You could also probably use patch-package. You'd need to change this:

shouldRewriteUrls:!0

to this:

shouldRewriteUrls:0

in @tailwindcss/postcss/dist/index.js. This is also far from ideal, but possibly viable as a temporary fix.

[inkstak]

@gregsullivan Thanks a lot ! postcss-url was a good start.

I've also updated all url() with absolute paths because it seems Tailwind doesn't rewrite absolute paths.

 @font-face {
   font-family: "Foo";
-  src:  url("foo.woff2") format("woff2"),
+  src:  url("/assets/fonts/foo.woff2") format("woff2"),
   font-weight: 400;
   font-style: normal;
 }

Then it's easier to use postcss-url to replace all of them with appropriate paths:

const rebaseUrl = function (asset) {
  return asset.url.replace(/^\/assets\/[^/]+\//, '')
}

module.exports = {
  plugins: {
    '@tailwindcss/postcss':  {},
    'postcss-url': { url: rebaseUrl },
  }
}

want me to tag you when I add that discussion?

I'll appreciate.

[gregsullivan]

@inkstak Good call on the absolute paths! I'm trying to keep the existing paths the same pending a resolution to the issue, despite relative paths leading to more convoluted replacements. If this becomes the permanent state of things, I think I'll migrate to absolute paths at that point.

I'll tag you on the discussion when I post it!