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

Question

我正在使用 Tailwind 应用背景图片。我有 CSS.

的单独文件

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

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

这是我的代码图像正在使用背景图像属性但不适用于 Tailwind。

Answer 1

您使用的语法 bg-[..] 仅在 Tailwind v3.x 中结合其 JIT compiler.

引入

对于 Tailwind v2.x，您可以 read up here 了解如何正确实施 background-image。

长话短说：

 // 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- 是用于背景颜色还是图像。

编辑：仅适用于顺风 v3.x。

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

Tailwind CSS background Image not Working with @apply

css

sass

reactjs

tailwind-css