title: How to remove excess border in :active state? tailwindcss
body: <p>I currently have a weird problem using tailwindcss. The button below looks fine.</p>
  <p><a href="https://i.stack.imgur.com/Zspdp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zspdp.png" alt="enter image description here" /></a></p>
  <p>But when I click it does shape pill/rounded, instead its a rectangle below.</p>
  <p><a href="https://i.stack.imgur.com/wJEIb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wJEIb.png" alt="enter image description here" /></a></p>
  <p>Someone knows how to make the active state shape same as the current one?</p>
  <hr>
  <p>Here is my button code:</p>
  <pre><code>&lt;button class=&quot;flex items-center justify-center focus:outline-none rounded-3xl 
  bg-green-200 text-gray-800 text-13 h-8 px-3&quot;&gt;
    Goto Button
  &lt;/button&gt;
  </code></pre>
  <p>I tried to add below code. But doesn't work</p>
  <pre><code>active:rounded-3xl
  </code></pre>
  <p>Device tested: iPhone X (using chrome browser (CTRL+SHFT+M))</p>