title: Link inside a TailwindCSS group:focus element fails as click event prevented
body: <p>I have an FAQ section which has accordion type sprung sections, all made with TailwindCSS (i.e. no Javascript). Links inside open sections do not work (they just close the FAQ as the question looses focus).</p>
  <p>Does anyone have any idea how i can get the link event to fire before the focus is lost?</p>
  <p>Here's a simple minimal example demonstrating the issue</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Test TailwindCSS Group:Focus&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;link href=&quot;tailwind.css&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;style&gt;
          /* ----- ACCORDION ----- */
          .group:focus .group-focus\:max-h-screen {
              max-height: 100vh;
          }
          .group:focus .group-focus\:text-white {
              --text-opacity: 1;
              color: #02455a; /*petrol_blue*/
              color: rgba(255, 255, 255, var(--text-opacity));
          }
  
          .group:focus .group-focus\:-rotate-90 {
              --transform-rotate: -90deg;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class=&quot;group&quot; tabindex=&quot;1&quot;&gt;
      &lt;div class=&quot;group flex justify-between px-4 py-2 items-center transition cursor-pointer pr-10 relative&quot;&gt;
          &lt;div class=&quot;h-8 w-8 items-center inline-flex justify-center rotate-180 transform transition group-focus:-rotate-90 absolute top-0 left-0 mb-auto ml-auto mt-2 mr-2&quot;&gt;
              &lt;svg fill=&quot;#02455a&quot; height='100px' width='100px' xmlns=&quot;http://www.w3.org/2000/svg&quot;
                   viewBox=&quot;0 0 847 847&quot; x=&quot;0px&quot; y=&quot;0px&quot;&gt;
                  &lt;g&gt;&lt;polygon points=&quot;670,584 423,263 176,584 &quot;&gt;&lt;/polygon&gt;&lt;/g&gt;&lt;/svg&gt;
          &lt;/div&gt;
          &lt;div class=&quot;transition pl-4  hover:opacity-50&quot;&gt;Question&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;group-focus:max-h-screen max-h-0 px-4 overflow-hidden&quot;&gt;
          &lt;p class=&quot;pl-4 pr-4 pt-0 pb-2&quot;&gt;Answer: &lt;a href=&quot;https://stackoverflow.com&quot;&gt;Stack Overflow&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><code>tailwind.css</code> is creating using:</p>
  <pre><code>npx tailwindcss-cli@latest build -o tailwind.css
  </code></pre>
  <p>(Incidentally, i realise the svg arrow isn't behaving itself, but that's another issue...)</p>