Heroku buttons styling issue

I made an app locally and pushed it on Heroku. The app is working perfectly on Heroku, however on the Homepage I have 2 buttons ( login and register ). When I run my app locally my buttons have some whitespace in between and they are rounded ( I am using tailwind for this). But on Heroku both buttons are not rounded and there is no whitespace in between them. When I inspect the button on Heroku, I see: class:".... rounded-full", which is what I expected and should have made the button rounded. Anyone has any idea what could cause this and how I can solve this ?

This is how my index.js looks like:

export default function Login() {
  return(
    <div>
      <Loginbuttons/>
    </div>
   )
}

and Loginbuttons.js defined as:

import Link from 'next/link'

export default function Loginbutton(props){
  return (
   <div>
   <div className = 'block'>
    <button
      style={{width:"10%", paddingTop:"15px",   paddingBottom:"15px"}}
      className='mt-10 mb-10 bg-blue-500 hover:bg-blue-700 text-wgvhite font-bold py-2 px-4 rounded-full'>
        <Link href='login' style={{textDecoration: 'none'}}>Login</Link>
    </button>

    <button
      style={{width:"10%", paddingTop:"15px", paddingBottom:"15px"}}
      className='mt-10 mb-10 ml-10 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full'>
        <Link href='register' style={{textDecoration: 'none'}}>Register</Link>
    </button>
  </div>
</div>)}
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum