Is it possible to pass a background image as prop from the Tailwind CSS config?

Question

This is the parent component Camp.vue

<template>
    <section class="border-2 border-green-400 2xl:mx-auto max-w-[1440px] relative flex flex-col py-10 lg:mb-10 lg:py-20 xl:mb-20">
      <div class="overflow-hidden flex h-[340px] w-full items-start justify-start gap-8 overflow-x-auto lg:h-[400px] xl:h-[640px]">
        <CampSite
          BackgroundImage='bg-img-1'
          title="Putuk truno Camp"
          subtitle="Prigen"
          peopleJoined="50+ joined"
        />
      </div>
    </section>
</template>
  
<script setup>
import CampSite from '../Chunks/CampSite.vue';
</script>

This is the child component Campsite.vue

<template>
    <div class="h-full w-full min-w-[1100px]" :class="props.BackgroundImage">
      
      CampSite1
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps(['BackgroundImage', 'title', 'subtitle', 'peopleJoined']);

</script>  

And this is the Tailwind config file

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./index.html","./src/**/*.{html,js,vue}"],
    theme: {
      extend: {
        colors: {
          green: {
            50: '#30AF5B',
            90: '#292C27',
          },
          gray: {
            10: '#EEEEEE',
            20: '#A2A2A2',
            30: '#7B7B7B',
            50: '#585858',
            90: '#141414',
          },
          orange: {
            50: '#FF814C',
          },
          blue: {
            70: '#021639',
          },
          yellow: {
            50: '#FEC601',
          },
        },
        backgroundImage: {
          'bg-img-1': "url('../src/assets/img-1.png')",
          'bg-img-2': "url('../src/assets/img-2.png')",
          'feature-bg': "url('../src/assets/feature-bg.png')",
          pattern: "url('../src/assets/pattern.png')",
          'pattern-2': "url('../src/assets/pattern-bg.png')",
        },
        screens: {
          xs: '400px',
          '3xl': '1680px',
          '4xl': '2200px',
        },
        maxWidth: {
          '10xl': '1512px',
        },
        borderRadius: {
          '5xl': '40px',
        },
      },
    },
    plugins: [],
  }

I am trying to pass a background image as a prop and the image is declared in the Tailwind config file, but it doesn't appear when I reference it in the :class and I can access all the props.

What have I done wrong?

I try to change the file path in the Tailwind config but this is the right path.

Answer 1

I solve this issue it's easy but i struggle with it all the day

<CampSite
      BackgroundImage='bg-bg-img-1'
      title="Putuk truno Camp"
      subtitle="Prigen"
      peopleJoined="50+ joined"
    />

I add the word bg before the name of the image and that's all