tailwind card collapses with small change in height-CodePudding

I'm new to Tailwind and trying to make a card.

The code works but when I change the height to 50 or anything other than close to 60 the entire container collapses? What's causing this and how to deal with it?

/* added by Editor for demonstration purpose */
var button = document.querySelector('button');
button.addEventListener('click', function() {
  var h = document.querySelector('.relative');
  h.classList.toggle('h-50');
  h.classList.toggle('h-60');
});

/* added by Editor for demonstration purpose */
button {
  border: 1px solid black;
}

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Button added by Editor for demonstration purpose -->
<button>Toggle Height</button>

<!-- Body -->
<div >
  <div >
    <div >
      <img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5782.png" alt="nike-air-shoe" />
    </div>
  </div>
</div>

CodePudding user response：

This is because the classes defined in TailwindCSS near h-50 in height are h-48, h-52,h-56and h-60. So whenever you give height like h-49 or h-51 it will give default h-0 height and thus collapses.

You can check all the height dimensions here .

If you want to give a custom height, you can give it by h-[50px] or h-[50rem].