title: Tailwind active style not displaying when element is also hovered
body: <p>I am working with TailwindCSS and am making a simple button that I want to have a shadow when hovered, then scale down when focused or active. The hover style works, but the active style does not. However it does work when I click it and then move the mouse off the button.</p>
  <p>Button:</p>
  <pre><code>&lt;router-link :to=&quot;{name: 'createEvent'}&quot; tag=&quot;button&quot; class=&quot;w-1/6 mx-auto rounded-full font-semibold py-2 px-4 border border-white rounded text-blue-400 bg-white hover:shadow-lg focus:bounce-sm hover:translate-t-2px transition-fast&quot;&gt;
     Get Started
  &lt;/router-link&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>/*scale*/
  @variants responsive, hover, focus, active {
      .bounce-sm {
         transform: scale(0.95);
      }
  }
  </code></pre>
  <p>Screenshots:</p>
  <p>Hover works
  <a href="https://i.stack.imgur.com/tDnvi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tDnvi.png" alt="" /></a></p>
  <p>Focus does not work when hover is also on
  <a href="https://i.stack.imgur.com/pJZNE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pJZNE.png" alt="enter image description here" /></a></p>
  <p>But focus works when hover is not on
  <a href="https://i.stack.imgur.com/lyoSL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lyoSL.png" alt="enter image description here" /></a></p>
  <p>Could someone explain to me why this is and how I can fix it? Thanks!</p>