Tailwind CSS 背景图像无法与 @apply 一起使用

Question

我正在使用 Tailwind 应用背景图像。我有单独的 CSS 文件。

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

body {
   @apply bg-[url('./2.PNG')]; 
}

这是我的代码 Image 正在使用 background-image 属性，但不适用于 Tailwind。

Answer 1

您使用的语法 bg-[..] 仅在 Tailwind v3.x 中与其 JIT 编译器。

对于 Tailwind v2.x，您可以在此处阅读了解如何实现背景图像适当地。

TL;DR：

 // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        backgroundImage: {
         'custom-background-image-name': "url('path-to-image/image.png')",
        }
      }
    }
  }

然后像这样使用它

@layer base {
  body {
    @apply bg-custom-background-image-name;
  }
}

Answer 2

尝试bg-[image:url('2.PNG')]。
如果没有 image: tailwind 不知道 bg- 是用于背景颜色还是用于图像。

编辑：仅适用于 Tailwind v3.x。