I can't set a backgorund image in tailwind.config.js because of faild to compile.

[OldBigBuddha]

I wrote the following file using this as the reference about customizing backgroud image.

module.exports = {
  purge: ["./src/**/*.tsx"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: theme => ({
        'hero-img': "url('/img/hero.webp')"
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

But, I got compile error like this.

Failed to compile.

./src/style/base.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/style/base.css)
Error: Can't resolve '/img/hero.webp' in '/Users/developer/work_dir/projects/TypeScript/page-template/src/style'

My file tree is:

.
├── README.md
├── craco.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── img
│   │   └── hero.webp
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.tsx
│   ├── components
│   │   └── HeroHeader.tsx
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   ├── setupTests.ts
│   └── style
│       └── base.css
├── tailwind.config.js
└── tsconfig.json

5 directories, 21 files

and base.css is:

@tailwind base;
@tailwind components;
@tailwind utilities;

I don't use any framwork like Next.js. I created this project with this command.

$ npx create-react-app page-template --template typescript --use-npm
$ npm install "tailwindcss@npm:@tailwindcss/postcss7-compat" "@tailwindcss/postcss7-compat" "postcss@^7" "autoprefixer@^9"
$ npm install @craco/craco

What should I do to success my compiling?

[simonswiss]

Hey!

Doing some research to help you debug, I have learned that while CRA tells you to put your images in public, when you want to reference them in your CSS (for background images), you need to actually have the image in your src folder instead 🙃

I created a new app from scratch with your installation steps, and was able to reproduce the same error.

Moving my image from public/images/my-image.jpg to src/images/my-image.jpg made the error go away 👍

If the following image path still doesn't work for you after that change...

theme: {
  extend: {
    backgroundImage: theme => ({
      'hero-img': "url('/img/hero.webp')"
    })
  },
},

... then try to use a relative path to where the image sits in comparison with your page in the src directory:

theme: {
  extend: {
    backgroundImage: theme => ({
-      'hero-img': "url('/img/hero.webp')"
+      'hero-img': "url('./img/hero.webp')"
    })
  },
},

You shouldn't have to do that, but if it still doesn't work after moving your image in src, it's worth a try.

Hope it helps 👍

[OldBigBuddha]

Thank you @simonswiss ! I was able to solve the problem based on your idea.

Specifically, I solved the problem by setting the file path as follows:

  theme: {
    extend: {
      backgroundImage: theme => ({
        'hero-img': "url('../img/hero.webp')"
      })
    },
  },

[stardvst]

i'm having the same problem, and this solution didn't work for me.
this is my file structure:

client/
  public/
    index.html
    style.css
  src/
    app/
      App.css
      App.jsx
    assets/
      images/
        hero.jpg
    index.css
    index.jsx
  tailwind.config.js

tailwind.config.js:

module.exports = {
  purge: ['./src/**/*.{js,jsx,}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        hero: "url('../assets/images/hero.jpg')",
      }),
    },
  },
};

App.css:

.app {
  @apply w-screen h-screen md:bg-hero md:bg-cover;
}

index.css:

@import url('app/App.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

when i move App.css and App.jsx outside from app/ folder and use hero: "url('assets/images/hero.jpg')", it works fine.
i think the problem here is that in config file it needs the file relative to src/ folder, but in App.css i'm referencing it from app/ folder so it needs the extra .. to recognize the file, but then, in index.css the included App.css messes with path.

[RheingoldRiver]

I am having this same issue as well, 2 years later. I tried the suggested solution, however, tailwind is still recognizing /img/hero.jpg and adding that to my compiled css, and therefore crashing my build because this folder does not exist. As I am migrating to tailwind fully, I suppose I could temporarily create two copies of my image directory, one that makes CRA (for anyone searching in Google in the future who doesn't know, CRA = Create React App) happy and one that makes tailwind happy, and then delete the CRA-friendly one later. However, this does not seem like a great option in case there are some cases where I can't use tailwind (I'm not sure if this will happen).

Ideally, I would like to configure an image directory in my tailwind.config.js file, but I don't see any way to do this. Am I missing something, and it's possible? Or is my idea to do a temporary copy of the images file correct?

[Rb-Oni]

I had the same issue and fixed it just by putting /public in front of my /img like this : 'test-img': "url('/public/img/test.jpg')",
My img folder is still in my public folder

[RheingoldRiver]

Ah, thanks for adding this! Yeah, I'm putting ../public/img/img_name_here.png as all of my paths currently. I just don't really like this solution, as it couples path to code too tightly (which I suppose it a bit of a non-complaint as I'm finding it somewhat impossible to change my image paths haha), and it's a bit ugly to have this all over the place.

[JIM90mdp]

Hi there!
I am having this same issue.
I tried putting ../public/img/ ../src/img/ , /public/img/, /src/img/....

It's doesn't works yet

[JHunnicutt]

I think there may be some underlying issues that Tailwind is having with importing images. I came across this thread when trying to solve similar problems, and I also saw that people are unable to import images using the url() function in backgrounds using the arbitrary syntax.

#6617

[FelipeCarlota]

Hi, there!
I'm having the same issue as well...

I'm trying to use the extend backgroundImage from tailwindcss, and works good on my develop environment, but, it's doesn't works on published application.

[meghannfh]

Hi, has anyone found a solution to this? Do we know if our images need to be inside the public or src folder and how we're to go about writing out the relative path?

[YuriCF1]

Just spent 2h trying to solve it, unfortuanlly nothing helped. And if i type the correct path of the image, the application crashes and i have to restart with npm run dev, using Next. What i could do was this on my page.tsx file

import img from '../../../public/images/fundo1.jpg'
<main className="
style={{
backgroundImage: ### url('${img.src}'),
backgroundPosition: "center 70%",
filter: "brightness(60%) contrast(90%)"
}}>