JSFiddle - React, Tailwind, and code Playground

HTML

<div class=button1>transition fine</div>
<div class=button2>transition broken</div>

CSS

.button1
{
  box-shadow:         0px 0px 0px #f00,
		                  inset 1px 1px 10px #0f0;
  transition: 				all 1s ease-in-out;
}


.button1:hover
{
  box-shadow:         1px 1px 10px #f00,
		                  inset 0px 0px 0px #0f0;
}

.button2
{
  box-shadow:         inset 1px 1px 10px #0f0;
	transition: 				all 1s ease-in-out;
}


.button2:hover
{
  box-shadow:         1px 1px 10px #f00;
}