title: Background image not showing up with React + TailwindCSS
body: <p>Im trying to use Tailwind with React to show a background image.
  My config is like the follow:</p>
  <pre><code>const white_bg = require(&quot;../../assets/images/wave_light.svg&quot;); // Import using relative path
  const black_bg = require(&quot;../../assets/images/wave_black.svg&quot;); // Import using relative path
  
  module.exports = {
    purge: [
      &quot;src/**/*.js&quot;,
      &quot;src/**/*.jsx&quot;,
      &quot;src/**/*.ts&quot;,
      &quot;src/**/*.tsx&quot;,
      &quot;public/**/*.html&quot;,
    ],
    theme: {
      extend: {
        backgroundImage: (theme) =&gt; ({
          &quot;white-landing&quot;: `url(${process.env.PUBLIC_URL + white_bg})`,
          &quot;black-landing&quot;: `url(${process.env.PUBLIC_URL + black_bg})`,
        }),
      },
  textColor: {
        &quot;nav-text&quot;: &quot;#eaeaea&quot;,
      },
      fontFamily: {
        header: [&quot;Poppins&quot;, &quot;sans-serif&quot;],
        body: [&quot;Poppins&quot;, &quot;sans-serif&quot;],
      },
      boxShadow: {
        header: &quot;0px 0px 50px 1px rgba(0, 0, 0, 0.35)&quot;,
        card: &quot;0px 0px 25px 1px rgba(0, 0, 0, 0.25)&quot;,
      },
  </code></pre>
  <p>And calling the classes in the html:</p>
  <pre><code>&lt;div className=&quot;bg-white-landing white-landing box-border h-full&quot;&gt;
  </code></pre>
  <p>None of my custom classes seem to work... Any help?</p>