JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.inner {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s linear 1s;
    display: inline-block;
}
.outer:hover .inner {
    width: 300px;
}
.outer:hover {
  display: inline-block; /* If I comment this, it will work */
}