title: Tailwind css backgroundImage doesn't work for me
body: <p>all,</p>
  <p>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 <a href="https://tailwindcss.com/docs/background-image" rel="noreferrer">https://tailwindcss.com/docs/background-image</a> &quot;By default, only responsive variants are generated for background image utilities.&quot;
  It means, without any further configuration on variants, I should be able to use it for this purpose.</p>
  <p>Here is how my tailwind.conf.js looks like (important part is at the end):</p>
  <pre><code>const plugin = require('tailwindcss/plugin')
  module.exports = {
      purge: [
        &quot;./pages/**/*.vue&quot;,
        &quot;./components/**/*.vue&quot;,
        &quot;./plugins/**/*.vue&quot;,
        &quot;./static/**/*.vue&quot;,
        &quot;./store/**/*.vue&quot;
      ],
      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': &quot;url('/storage/img/sys/lg-hero.jpg')&quot;,
                  'hero-sm': &quot;url('/storage/img/sys/sm-hero.jpg')&quot;,
              },
          }
      },
      variants: {
          opacity: ['group-hover'],
          backgroundOpacity: ['group-hover'],
      },
      plugins: []
  }
  </code></pre>
  <p>Just to make sure I included the full content.
  And this is how the html looks like:</p>
  <pre><code>&lt;div class=&quot;bg-hero-sm lg:bg-hero-lg h-24 w-24&quot;&gt;
     potato
  &lt;/div&gt;
  &lt;div class=&quot;h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>As I said, nothing special, &quot;npm run dev&quot; finishes witout 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 don't think it's important info, but I use tailwind with laravel.</p>
  <p>Can anyone help me with that? I'm desperate, and I'm trying to make it work for days :(I can do workaround using css code in my sass file, but I want to use tailwinds own solution)</p>
  <p>Thank you all in advance!</p>