如何在Tailwind CSS中指定背景图片的相对路径

直接在你的index.html元素上使用以下类即可：

<div class="bg-[url('../assets/images/image1.svg')]"></div>

路径逻辑说明 #

你的index.html位于layouts目录下，要访问根目录下的assets/images/image1.svg，相对路径需要：

1. 用../退回到项目根目录（跳出layouts文件夹）
2. 再依次进入assets → images目录找到目标SVG文件

额外注意事项 #

• 确保文件名和路径的大小写与实际文件一致，部分操作系统（如Linux）会区分大小写，拼写错误会导致图片加载失败
• 如果Tailwind无法识别这个自定义背景类，检查tailwind.config.js的content配置，确认已包含layouts目录下的HTML文件：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./layouts/**/*.html",
      // 可添加其他需要扫描的文件路径，比如./src/**/*.html等
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

这样Tailwind在构建时才能正确生成这个自定义背景类的样式。

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