How to add background image class to tailwind config in CRA application

Question

I am trying to use image as background using tailwind css in Create react app. But can't figure out how to add background image class.

The error:

Module not found: Error: Can't resolve './src/images/pages/login.svg' in 'C:<some_project>\src'

what i tried:

backgroundImage: {
      "login-image": "url('./src/images/pages/login.svg')",
},
// assumed it starts from src
backgroundImage: {
      "login-image": "url('/images/pages/login.svg')",
},
// also tried to place it into public page and include like
backgroundImage: {
      "login-image": "url('/images/pages/login.svg')",
},

Any help would be appreciated! Thanks

score 0 · Answer 1 · answered Mar 21 '22 at 23:18

This is how I got mine to work:

In the tailwind.config.js, I added my background to extend (make sure to put your appropriate image url):

extend: {
  backgroundImage: {
    awlogo: "url('./images/aw-lg-logo.png')",
    awOpac: "url('./images/awopac.png')"
  },
},

Here is my App.js example:

import "./index.css";

function App() {
  return (
    <div className="grid place-items-center h-screen bg-blue">
      <img
        className="bg-no-repeat w-screen h-screen opacity-5 fixed overflow-hidden z-1 bg-cover bg-awOpac  "
        alt="aw logo opacity"
      />
    </div>
  );
}

where it says bg-awOpac that basically says:

.bg-awOpac {
    background-image: url('./images/awopac.png');
}

Make sure you are giving the image a height and width as well.

I am using "tailwindcss": "^3.0.23"

How to add background image class to tailwind config in CRA application

1 Answers1