I'm trying to create an background image in tailwind theme and use it in the component.

The theme looks like,

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    fontFamily: {
      shiseido: ["var(--font-ShiseidoGinza)", "sans-serif"],
      headingExtRegular: ["var(--font-ShiseidoGinzaExtRegular)", "sans-serif"],
      headingExtBold: ["var(--font-ShiseidoGinzaExtBold)", "sans-serif"],
    },
    extend: {
      colors: {
        primary: "#D6001C",
        greyLight: "#787878",
        greyDark: "#343434",
      },
      backgroundImage: {
        "artists-pattern": "url('./app/assets/artists-gradient.png')",
      },
    },
  },
  plugins: [],
};

And I want to use the artists-pattern in my component like this,

<div className="w-full h-[90vh] relative flex bg-artists-pattern">
        {artists.map((artist) => {
          return <div className="" key={artist.id}></div>;
        })}
      </div>

But I'm getting this error,