所有，
我正在尝试使用tailwinds backgroundImage解决方案，我在这里或github上找到了许多其他tailwindcss问题的帮助，但没有这个。这不是一个复杂的任务，但仍然不起作用。因此，正如文档中所述，我想创建2个简单的背景图像，用于多个视图大小。文档https://tailwindcss.com/docs/background-image中声明："默认情况下，只为背景图像实用程序生成响应变量。"这意味着，无需对变量进行任何进一步配置，我就可以将其用于此目的。
下面是我的tailwind.conf.js的样子（重要部分在最后）：

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: []
}

只是为了确保我包含了完整的内容。这是html的样子：

<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>

正如我所说，没有什么特别的，"npm run dev"没有任何错误...但是如果我检查元素，我看不到任何与css中的任何背景参数相关的东西。甚至文档中的例子也不起作用，这应该提供一个渐变块。我不认为这是重要的信息，但是我在laravel中使用了tailwind。
有人能帮我吗？我很绝望，我试着让它工作几天：（我可以在我的sass文件中使用css代码，但我想使用tailwind自己的解决方案）
提前感谢大家!