Configure url() source in tailwind.config

Question

When using url() in theming in tailwind.config.js, e.g.,

theme: {
  backgroundImage: {
    abc: 'url(/myImage.png)
  }

eventually this URL is using the stylesheet source which for me just so happens to be a CDN setup by shopify hydrogen. Is there a way to use the active domain instead of CSS source? Using the active domain exposes the image correctly.

What is interesting to note is that tailwind.css does reference fonts with the same url() and this seems to work as PostCSS processes the fonts and serves them from the CDN

@font-face {
  font-family: 'SourceSans';
  font-display: swap;
  font-weight: 600;
  src: url('./fonts/SourceSans/SemiBold.ttf') format('opentype');
}

Answer 1

Consider using the same ./ prefix (instead of /) in your background image values as you do for your @font-face.

The url() function works the same way whereever it is used, so if it works in the src in @font-face, you can use the same strategy in backgroundImage:

abc: 'url(./myImage.png)',