title: Buttons don't have uniform padding
body: <p>I am using a headless UI tab component and when I add padding to the buttons as in below code, I expect all the buttons to have uniform padding but there seems to be some issues here.</p>
  <p><strong>Headless UI tabs component:</strong></p>
  <pre><code>              &lt;Tab.List className=&quot;flex sm:flex-col&quot;&gt;
                      &lt;Tab&gt;
                      {({ selected }) =&gt; (
                          &lt;button 
                          className={`px-6 py-4 ${selected ? 'bg-white text-black' : 'bg-red-600 text-white'}`}
                          &gt;
                            Frontend
                          &lt;/button&gt;
                        )}
                      &lt;/Tab&gt;
                      &lt;Tab&gt;
                      {({ selected }) =&gt; (
                          &lt;button
                          className={`px-6 py-4 ${selected ? 'bg-white text-black' : 'bg-red-600 text-white'}`}
                          &gt;
                            Backend
                          &lt;/button&gt;
                      )}
                      &lt;/Tab&gt;
                      &lt;Tab&gt;
                      {({ selected }) =&gt; (
                          &lt;button
                          className={`px-6 py-4 ${selected ? 'bg-white text-black' : 'bg-red-600 text-white'}`}
                          &gt;
                            Multimedia
                          &lt;/button&gt;
                      )}
                      &lt;/Tab&gt;
                  &lt;/Tab.List&gt;
  </code></pre>
  <p><strong>Result:</strong></p>
  <p><a href="https://i.stack.imgur.com/0K9rE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0K9rE.png" alt="enter image description here" /></a></p>
  <p><strong>Possible Cause:</strong></p>
  <p>Button padding seems to be rendering twice by headless UI otherwise button itself has the required padding.</p>
  <p><a href="https://i.stack.imgur.com/egHkg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/egHkg.png" alt="enter image description here" /></a></p>
  <p>Also if it is of any help, I have added the .babelrc.js and updated the _document.js for making twin macro work:</p>
  <p><strong>.babelrc.js</strong></p>
  <pre><code>module.exports = {
      presets: [['next/babel', { 'preset-react': { runtime: 'automatic' } }]],
      plugins: ['babel-plugin-macros', ['styled-components', { ssr: true }]],
    }
  </code></pre>
  <p><strong>_document.js</strong></p>
  <pre><code>import Document from 'next/document'
  import { ServerStyleSheet } from 'styled-components'
  
  export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
      const sheet = new ServerStyleSheet()
      const originalRenderPage = ctx.renderPage
      try {
        ctx.renderPage = () =&gt;
          originalRenderPage({
            enhanceApp: App =&gt; props =&gt; sheet.collectStyles(&lt;App {...props} /&gt;),
          })
        const initialProps = await Document.getInitialProps(ctx)
  
        return {
          ...initialProps,
          styles: (
            &lt;&gt;
              {initialProps.styles}
              {sheet.getStyleElement()}
            &lt;/&gt;
          ),
        }
      } finally {
        sheet.seal()
      }
    }
  }
  </code></pre>
  <p>Any help or suggestion is greatly appreciated</p>
  <p>EDIT:
  Changing the button to a div solved the issue. I am still not quite sure how it solved though</p>