Tailwind CSS background images

tailwind-background-image.md

Since Tailwind 1.7, you don't need to do background images with custom CSS

tailwind.css

.header {
  background: hsl(180, 29%, 50%) center/cover;
  background-image: url(/images/bg-header-mobile.svg);
}

@media (min-width: 640px) {
  .header {
    background-image: url(/images/bg-header-desktop.svg);
  }
}

Now you can do this, and use bg-{key}, such as bg-header-mobile or bg-header-desktop.

tailwind.js

module.exports = {
    theme: {
      extend: {
        backgroundImage: theme => ({
        "header-desktop": "url('/images/bg-header-desktop.svg')",
        "header-mobile": "url('/images/bg-header-mobile.svg')"
        })
      }
    }
  }

App.js

<header className="w-full h-40 bg-desaturated-dark-cyan bg-header-mobile sm:bg-header-desktop bg-center bg-cover"></header>