Tailwind CS backgroundImage doesn't work for me

I'm trying to make tailwinds backgroundImage solution work, and I found help for many other tailwindcss problems here or on GitHub, but not for this. It's not a complicated task, but still doesn't work.

So as in the documentation, I want to create 2 simple background image to use for multiple viewsize. It is stated in the documentation https://tailwindcss.com/docs/background-image "By default, only responsive variants are generated for background image utilities." It means, without any further configuration on variants, I should be able to use it for this purpose.

Here is how my tailwind.conf.js looks like (important part is at the end):

const plugin = require('tailwindcss/plugin')
module.exports = {
    purge: [
      "./pages/**/*.vue",
      "./components/**/*.vue",
      "./plugins/**/*.vue",
      "./static/**/*.vue",
      "./store/**/*.vue"
    ],
    theme: {
        extend: {
            minHeight: {
                '120': '30rem',
            },
            height: {
                '15': '3.75rem',
                '17': '4.25rem',
                '7': '1.75rem',
                '75': '18.75rem',
            },
            width: {
                '15': '3.75rem',
                open: '11.875rem',
                '75': '18.75rem',
            },
            margin: {
                '7': '1.75rem',
                '17': '4.25rem',
                '27': '6.75rem',
            },
            padding: {
                '7': '1.75rem',
            },
            borderWidth: {
                '5': '5px',
            },
            fontSize: {
                '5xl': '3.375rem',
                'xxl': '1.375rem',
            },
            boxShadow: {
                'lg': '0px 0px 10px #00000033',
                'xl': '0px 0px 20px #00000080',
            },
            gap: {
                '7': '1.75rem',
            },
            inset: {
                '10': '2.5rem',
                '11': '2.75rem',
                '17': '4.25rem',
                '1/2': '50%',
            },
            backgroundImage: {
                'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
                'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
            },
        }
    },
    variants: {
        opacity: ['group-hover'],
        backgroundOpacity: ['group-hover'],
    },
    plugins: []
}

Just to make sure I included the full content. And this is how the html looks like:

<div class="bg-hero-sm lg:bg-hero-lg h-24 w-24">
   potato
</div>
<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>

As I said, nothing special, "npm run dev" finishes without any error...but if I inspect the element, I cannot see anything related to any background parameter in CSS. Even the example from documentation doesn't work, which should have to provide a gradient block.

I am using Tailwind with Laravel.

How can I proceed? (I can do workaround using CSS code in my sass file, but I want to use Tailwind's own solution).

The background image functionality of tailwindcss has been released in version 1.7.0.

I tested your code in my development environment and it didn't work either since I also had an earlier version of tailwindcss. After upgrading to the latest version, your code has worked fine.