Hello,

I tried to apply some padding on the login button of my login form page.
The Form.module.css button styling:

.button {
  @apply w-full bg-gradient-to-r from-blue-500 to-indigo-500 rounded-md;
  @apply py-3 text-gray-50 text-lg;
}

This is the button containing div in JSX in the /pages/login.js file:

<div className='input-button'>
  <button type='submit' className={styles.button}>
    <div className={styles.loginButtonMargin}>
      Login
    </div>
  </button>
</div>

It's the @apply py-3 that's the problem, without the py-3 the site looks great. The problem only seems to occur in Firefox.

Anyone has an idea how to solve this problem? I tried Google, but couldn't really put in to the right words what's the problem, because I'm very new. (so no result)
I created these files by repeating all steps from this tutorial: https://youtu.be/t0Fs0NO78X8?t=2149
In the tutorial there is no problem with the page breaking down, just like in the Google Chrome browser.

In the end I want to create my own social webapp compatible with all browsers, so I like to know how to fix this kind of issues with the Firefox browser.

Please let me know if you have a suggestion! Thank you in advance!