顺风不将背景图像应用于标签

Question

相关信息：

Tailwind css backgroundImage doesn't work for me

tailwind.config.js

module.exports = {
  theme: {
    ...
    extend: {
      ...
      backgroundImage: {
        "footer-sierpinski": "url('/bg.svg')",
      },

Layout.astro

...
<main class="flex-1 px-4">
  <slot />
</main>
<!-- <img src="/bg.svg" /> --> <---- works
<!-- <div style="background-image: url('/apple-touch-icon.png');"></div> --> <--- doesn't work
<div class="text-slate-600 bg-footer-sierpinski"> <--- doesn't work
</div>
...

无论格式如何，图像都不会显示。

在侧风的配置文件中尝试了不同的变体：

/bg.svg
./bg.svg
../../public/bg.svg
/public/bg.svg

依赖关系：

  "devDependencies": {
    "@astrojs/tailwind": "^1.0.0",
    "astro": "1.1.1",
    "autoprefixer": "^10.3.7",
    "feed": "^4.2.2",
    "prettier-plugin-astro": "^0.5.3",
    "tailwindcss": "^3.1.8"
  },
  "dependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/typography": "^0.5.8",
    "moment": "^2.29.4",
    "rehype-autolink-headings": "^6.1.1",
    "rehype-slug": "^5.0.1",
    "twitter-api-client": "^1.6.1"
  }

Answer 1

如果您需要使用没有意义的一次性背景图像值来包含您的主题，那么使用方括号来使用任意值动态生成一个属性。

<div class="bg-[url('/img/hero-pattern.svg')]">