如何在Tailwind.config中配置url()以使用当前域名而非CSS源？

我在tailwind.config.js的主题配置里用url()设置背景图时，代码示例如下：

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

目前这个URL会指向Shopify Hydrogen搭建的CDN作为样式表源，导致图片无法正常显示，只有改成使用当前域名加载图片才能正确显示。

另外注意到，在tailwind.css里用相同的url()引用字体却能正常工作，因为PostCSS会处理字体文件并从CDN提供服务，代码示例如下：

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

以下是几种可行的解决方法：

• 直接指定完整当前域名路径
  把url()里的路径改成完整的当前域名地址，比如：

  theme: {
    backgroundImage: {
      abc: 'url(https://your-current-domain.com/myImage.png)'
    }
  }
  

  如果图片放在项目的public目录下，也可以尝试相对路径（需根据项目结构调整，确保编译后路径正确）：

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

• 利用环境变量动态注入域名
  通过Hydrogen的环境变量，在配置中动态拼接当前域名，适配不同环境：

  const currentDomain = process.env.SHOPIFY_STORE_DOMAIN || 'your-default-domain.com';
  
  theme: {
    backgroundImage: {
      abc: `url(https://${currentDomain}/myImage.png)`
    }
  }
  

• 配置PostCSS处理背景图URL
  字体文件能正常工作是因为PostCSS的资源处理，你可以给PostCSS添加postcss-url插件，让背景图URL也被正确解析：
  在postcss.config.js中修改配置：

  module.exports = {
    plugins: {
      'postcss-url': {
        url: 'rebase',
        basePath: './public'
      },
      tailwindcss: {},
      autoprefixer: {},
    },
  };
  

  这样PostCSS会重新调整背景图的URL路径，确保指向正确的资源位置。

为什么字体和背景图的URL表现不同？ #

字体文件在tailwind.css中能正常加载，是因为PostCSS会自动处理@font-face中的url()，将字体文件复制到CDN并替换路径；而Tailwind配置里的backgroundImage是直接生成CSS规则，没有经过PostCSS的资源处理流程，所以URL会直接沿用样式表的源（Hydrogen的CDN），导致路径错误。

内容的提问来源于stack exchange，提问作者dras