Headless UI Tabs组件内按钮padding不统一问题求助

我正在使用Headless UI的Tab组件，按照如下代码给按钮添加padding时，预期所有按钮的padding保持统一，但目前遇到了显示异常问题。

Headless UI tabs组件代码 #

<Tab.List className="flex sm:flex-col">
      <Tab>
      {({ selected }) => (
          <button 
          className={`px-6 py-4 ${selected ? 'bg-white text-black' : 'bg-red-600 text-white'}`}
          >
            Frontend
          </button>
        )}
      </Tab>
      <Tab>
      {({ selected }) => (
          <button
          className={`px-6 py-4 ${selected ? 'bg-white text-black' : 'bg-red-600 text-white'}`}
          >
            Backend
          </button>
      )}
      </Tab>
      <Tab>
      {({ selected }) => (
          <button
          className={`px-6 py-4 ${selected ? 'bg-white text-black' : 'bg-red-600 text-white'}`}
          >
            Multimedia
          </button>
      )}
      </Tab>
  </Tab.List>

运行结果 #

可能原因 #

经排查疑似Headless UI对按钮的padding进行了重复渲染，单独查看按钮本身的padding配置是符合要求的。

另外为了让twin macro正常运行，我配置了.babelrc.js并修改了Next.js的_document.js文件，相关配置如下：

.babelrc.js 配置 #

module.exports = {
    presets: [['next/babel', { 'preset-react': { runtime: 'automatic' } }]],
    plugins: ['babel-plugin-macros', ['styled-components', { ssr: true }]],
  }

_document.js 配置 #

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 = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        })
      const initialProps = await Document.getInitialProps(ctx)

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

目前我将button标签替换为div后问题解决，但不清楚具体的问题根因，希望得到相关帮助或建议。

内容的提问来源于stack exchange，提问作者Shiladitya Thakur