Tailwind v4 @import "node_modules/package/file.css breaks with relative path font url

[nunocasteleira]

I have an application that I'm trying to migrate to v4.

I previously had

@import "@some-package/styles/dist/css/styles-full.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

that the CLI converted to

@import "@some-package/styles/dist/css/styles-full.css" layer(base);

@import "tailwindcss";

@config '../../tailwind.config.ts';

On this file styles-full.css, I somewhere have

/* file from node_modules "@some-package/styles/dist/css/styles-full.css" */

@font-face {
  font-display: swap;
  font-family: "CondensedPro-Medium";
  font-style: normal;
  font-weight: 500;
  src: local("Condensed Pro Med"), local("CondensedPro-Med"), url("../fonts/condensed-pro-medium.woff2") format("woff2"), url("../fonts/condensed-pro-medium.woff") format("woff");
}

And when I render the Next.js app, I get

Build Error
Next.js (15.1.3) out of date [(learn more)](https://nextjs.org/docs/messages/version-staleness)
Failed to compile

./src/app/globals.css:4:1
Module not found: Can't resolve '../fonts/condensed-pro-medium.woff2'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/globals.css

Can I fix this on my side? How can I point this "inline" import to the correct relative path for the node_module?

EDIT: Reproduction repository https://github.com/nunocasteleira/node-modules-font

[wongjn]

You can try changing the path to its real location in node_modules like:

src: … url("../../node_modules/path/to/package/fonts/condensed-pro-medium.woff2") format("woff2"), …

[nunocasteleira]

I can edit the file, but those changes won't (and probably shouldn't) be committed. Other devs will clone the repo, install the node_modules and expect it to work.

[wongjn]

Did you use postcss-import with v3? Perhaps add it back in and wrap the @import path of the styles-full.css in url() so Tailwind ignores it but perhaps postcss-import handles it (so that it works like it did in v3, if this works).

You could also consider importing the styles-full.css separately outside the Tailwind CSS file.

Lastly, you could try some sort of post-install NPM script that applies a patch to the file. This would mean on install, other devs would get the same change.

[nunocasteleira]

I was using postcss-import previously, but with the default config.

I also see that tailwind team is doing some things regarding this for @source and @plugin rules: https://github.com/tailwindlabs/tailwindcss/blob/next/packages/%40tailwindcss-postcss/src/postcss-fix-relative-paths/index.ts and
https://github.com/tailwindlabs/tailwindcss/blob/next/packages/%40tailwindcss-postcss/src/postcss-fix-relative-paths/index.test.ts

I will check your suggestions!

[kexhest]

Did you manage to solve this?

[nunocasteleira]

No, I imported the css file elsewhere, but I would prefer the initial approach of importing it on the globals.css (file where the @tailwind directive is), as it would allow for the preflight to remove some styles from the imported .css from node_modules.