使用Tailwind背景图片任意值无效问题求助

核心原因 #

Tailwind的bg-[url()]中填写的路径是相对于最终编译后CSS文件的位置，而非你的组件文件位置；但img标签用require()时，webpack会自动解析资源路径并处理，所以路径能正确识别。另外，你当前的div未设置高度，即使背景图路径正确，也会因为元素无高度而无法显示。

解决方案 #

• 方案1：使用项目根目录绝对路径
  直接写相对于项目根的路径（比如src目录下的资源），Tailwind编译时会正确识别这个路径，同时给div设置高度：

  <div className="bg-[url('/src/assets/header.jpeg')] bg-no-repeat bg-cover bg-center bg-fixed h-[48px]"></div>
  

• 方案2：借助CSS变量传递webpack解析后的路径
  利用require()让webpack解析图片路径，再通过CSS变量传给Tailwind，路径逻辑完全和img标签一致：

  const imageUrl = require('../../assets/header.jpeg');
  <div 
    style={{ '--bg-image': `url(${imageUrl})` }}
    className="bg-[var(--bg-image)] bg-no-repeat bg-cover bg-center bg-fixed h-[48px]"
  ></div>
  

• 方案3：将图片放入public目录
  把图片放到项目的public文件夹下，直接用相对于public的根路径即可：

  <div className="bg-[url('/header.jpeg')] bg-no-repeat bg-cover bg-center bg-fixed h-[48px]"></div>
  

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