css - Padding and margin not working on breakpoints

Question

I'm using tailwindCSS. At the moment i want to make two buttons. They should be small (with a small vertical padding) on desktop screens and big (with a bigger vertical padding) on mobile screens. I added the tailwindCSS property py-4 for smaller screens and md:py-2 for bigger screens. For some reason it doesn't work. For test purposes I also changed the background color of the button in my code. The background color switch works just fine, but the padding remains the same.

Code

 <div class="flex justify-between flex-col md:flex-row items-center mt-4 md:mt-4">
            <div>
                <button @click.prevent="showInviteInputs" v-if="community.active == 1" class="px-3 w-full md:w-auto py-4 md:py-0 bg-green-600 text-white font-bold rounded hover:bg-green-700">
                    <i class="fas fa-user-plus "></i>
                    Freunde einladen
                </button>
                <button v-if="community.active == 1" @click.prevent="showModalcloseGroup = true" class="px-3 w-full md:w-auto py-4 md:py-0  mt-4 bg-gray-200 md:bg-yellow-200 text-gray-700 font-bold rounded hover:bg-gray-300">Gruppe schlie?en</button>
            </div>
            <div class="flex items-center">
                <h1 class="text-gray-700 mt-4 md:mt-0 font-bold">Host: {{community.host}} (Ich)</h1>
            </div>
        </div>

tailwind.config.js:

const colors = require('tailwindcss/colors');

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      blue:colors.blue,
      white: colors.white,
      gray: colors.trueGray,
      indigo: colors.indigo,
      green: colors.green,
      red: colors.rose,
      yellow: colors.amber,
      ccblue: {
        DEFAULT: '#1A2238',
      },
      cclavendel: {
        DEFAULT: '#9DAAF2',
      }, 
      ccorange: {
        DEFAULT: '#FF6A3D',
      },
       ccyellow: {
        DEFAULT: '#F4DB7D',
      },
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

On bigger devices:

And on smaller devices:

Answer 1

等待大神答复