Cannot configure CSS output paths, so all fonts and images don't resolve...

[davidde]

I just tried tailwindcss v4 using the standalone CLI (without node.js).

I set up the watcher:

tailwindcss -i main.css -o assets/css/tailwind-output.css --watch

with the following project path:

> project
    main.html
    main.css
    > assets
       > css
           tailwind-output.css
       > fonts
       > images

All my font and image src paths in main.css are relative to the parent dir project, but the tailwind build doesn't update them correctly to the assets/css/ path, so none are found...

How to resolve this?

(I prefer not to update the paths in the source file, because then they won't work without tailwind, and I have to update all of them again when testing without tailwind. Clearly I'm missing a simple config setting somewhere right?)

[wongjn]

Paths should be relative to the assets/css/tailwind-output.css file, like:

@font-face {
  …
  src: url(../fonts/foo.woff2);
}

Or

<div class="bg-[url(../images/hero.webp)]">

Or if the project folder is served as the root of the host (i.e. http://localhost:3000/main.html):

@font-face {
  …
  src: url(/assets/fonts/foo.woff2);
}

Or

<div class="bg-[url(/assets/images/hero.webp)]">

[davidde]

Paths should be relative to the assets/css/tailwind-output.css file

That's what I feared, just hoped there was some convenient fix for the user.

Or if the project folder is served as the root of the host <div class="bg-[url(/assets/images/hero.webp)]">

That's actually really useful, thank you.