Tailwind CSS background Image not Working with @apply-CodePudding

I am applying background Image with Tailwind. I have separate file for CSS.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

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

This is my code Image is working with background-image property but not with Tailwind.

CodePudding user response：

The syntax you are using bg-[..] was only introduced in Tailwind v3.x in combination with their JIT compiler.

For Tailwind v2.x you can read up here on how to implement a background-image properly.

TL;DR:

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

Then use it like so

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

CodePudding user response：

Try bg-[image:url('2.PNG')]. Without image: tailwind does not know whether the bg- is for the background color or for the image.

edit: only works with tailwind v3.x.