Buttons don't have uniform padding - next.js

Question

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.
Headless UI tabs component:
<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>
Result:
Possible Cause:
Button padding seems to be rendering twice by headless UI otherwise button itself has the required padding.
Also if it is of any help, I have added the .babelrc.js and updated the _document.js for making twin macro work:
.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()
}
}
}
Any help or suggestion is greatly appreciated
EDIT:
Changing the button to a div solved the issue. I am still not quite sure how it solved though

Answer 1

Tab itself renders a button. So, to prevent nesting a button element inside another, you need to use the as prop on the Tab component:
<Tab.List className="flex sm:flex-col">
<Tab as={Fragment}>
{({ selected }) => (
<button
className={`px-6 py-4 ${
selected ? 'bg-white text-black' : 'bg-red-600 text-white'
}`}
>
Frontend
</button>
)}
</Tab>
{/*...*/}
</Tab.List>
You can also do:
<Tab.List className="flex sm:flex-col">
<Tab
className={({ selected }) =>
`px-6 py-4 ${selected ? 'bg-white text-black' : 'bg-red-600 text-white'}`
}
>
Frontend
</Tab>
{/*...*/}
</Tab.List>
Reference: https://headlessui.dev/react/tabs#styling-the-selected-tab