Mixed tailwind + SCSS @font-face 'url' properties always become relative to current browser URL

[drone1]

Hi all.

So in short, I'm migrating my app's CSS from SASS to Tailwind, and I can't get this font to load using an absolute path anymore:

@font-face {
	font-family: 'Jura';
	font-style: normal;
	font-weight: 200;
	src: local('Jura-VariableFont_wght'),
		url('/fonts/jura/Jura-VariableFont_wght.ttf') format('truetype');
}

The font is located at https://www.mydomain.com/fonts/... as you'd expect, and on my home page (mydomain.com/) it loads the font just fine, however, as soon as I navigate to /account or /x/y/z, the browser attempts to load the font relatively, i.e. from /account/fonts/... and /x/y/z/fonts/... even though I've clearly got a / at the beginning of the URL.

Whether I use not quotes at all (url(/fonts/...)) or quotes doesn't make a difference. I'd love to inspect the generated styles, but in dev, all I see for sources are <style> tags in Chrome Inspector (no generated .css file to inspect).

To be clear, if I set my URL to /test/fonts/... I do in fact see test in the URL's, so I know it is attempting to run that @font-face code.

Before I elaborate here, are any bells ringing for anyone? I've looked around on the web but haven't found anything about why this might be happening.

Details:

• I'm transitioning a project from SCSS over to tailwind via fourseven:scss in a Meteor 2.16 application, using Blaze
• My tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
	darkMode: 'selector',
	content: ['./imports/ui/**/*.{js,html}'],
	theme: {
		extend: {
			colors: {
				accent: '#E7F256'
			},
			backgroundImage: {
				'homepage-pattern': "url('/svg/bg/qqquad.svg')"
			}
		}
	},
	corePlugins: {
		aspectRatio: false
	},
	plugins: [require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio')]
}

• Meteor packages included are: fourseven:scss & minifier-css@1.6.4
• Tailwind NPM packages included:

"tailwindcss": "^3.4.3",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.7",
"postcss": "^8.4.38",

My main.scss looks like this, and no matter where I move inclusion of _fonts.scss it seems to make no difference:

// Include tailwind.css stuff first, since it has a reset that our other styles will rely upon.
// The SASS styles below can override tailwind, yes, but are incredibly unlikely to do so,
// due to the naming convention we use
@tailwind base;
@tailwind components;
@tailwind utilities;

// Global
@import "{}/imports/ui/stylesheets/_fonts.scss"; // @font-face code above defined here
@import "{}/imports/ui/stylesheets/_blahblahblah.scss";
...

Any help would be greatly appreciated! Thank you kindly.