Tailwind CSS背景图片不能使用@apply

cgyqldqp  于 2023-06-25  发布在  其他
关注(0)|答案(3)|浏览(185)

我正在应用背景图像与顺风。我有单独的CSS文件。

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

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

这是我的代码图像是与background-image属性,但不是与Tailwind。

nue99wik

nue99wik1#

我试着用这个:

theme: {
 extend: { 
   backgroundImage: {
 ''fond_caractères'' : url("fond_caractères.png"),
 } 
 }
 }

然后呢

@layer base {
body {
    @apply fond_caractères: url("fond_caractères.png");

但Tailwind说:bg-fond_caractères:类不存在。如果bg-fond_caractères:是自定义类,请确保它是在@layer指令中定义的。

i2loujxw

i2loujxw2#

您正在使用的bg-[..]语法仅在Tailwind v3.x中结合JIT compiler引入。
对于Tailwind v2.x,你可以read up here上如何正确实现背景映像。
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;
  }
}
f87krz0w

f87krz0w3#

试试bg-[image:url('2.PNG')]没有image:顺风不知道bg-是背景色还是图像。
编辑:只适用于tailwind v3.x。

相关问题