cannot set background image

[haniframadhani]

i want to set image as backround image. i do like this
using arbitrary value

<div class="bg-[url('<?= bloginfo('template_directory') ?>/assets/images/heroimage.webp')]"></div>

and custom in tailwind.config.js

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'hero-image': "url('/assets/images/heroimage.webp')",
      }
    }
  }
}

<div class="bg-hero-image"></div>

the cannot be found if not use <?= bloginfo('template_directory') ?>/assets/images/heroimage.webp. if use <?= bloginfo('template_directory') ?>/assets/images/heroimage.webp it build successfuly but the class not found in build css and the image not showing in web