Background image not showing up on style.css with Tailwind CSS-CodePudding

I am creating an HTML website using Tailwind CSS and JS. I added an image in styles.css and it is not showing up.

<div >
  <div >
  </div>
</div>

.main-section-banner {
  background-image: url("images/amazonbanner.jpg");
  background-position: center;
  background-size: cover;
}

CodePudding user response：

Put your custome style below your tailwind declaration. Like here:

@tailwind base;
@tailwind components;
@tailwind utilities;

.main-section-banner{
    background-image: url("https://via.placeholder.com/500");
    background-position: center;
    background-size: cover;
}

CodePudding user response：

Try using a Tailwind bg- utility class to add your background image:

<div >
  <div >
  </div>
</div>

CodePudding user response：

That has happened to me before. I would recommend putting it in the in the head of the html file.