Css 填充和边距不适用于断点

我正在使用tailwindCSS。现在我想做两个按钮。它们在桌面屏幕上应该是小的（带有小的垂直填充），在移动屏幕上应该是大的（带有大的垂直填充）。我为较小的屏幕添加了tailwindCSS属性py-4，为较大的屏幕添加了md:py-2。由于某种原因，它不起作用。出于测试目的，我还更改了代码中按钮的背景色。背景色开关工作正常，但填充保持不变

代码

 <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>

在更大的设备上：

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: [],
}

在小型设备上：

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: [],
}

弗伦德·埃因拉登
格鲁普·施利恩
主机：{{community.Host}}（Ich）

---

您提供了

md:py-0

instade of

md:py-2

。请在询问之前进行适当调试。

能否将代码作为文本片段而不是图像发布？使人们更容易提供帮助。当然，我很抱歉：'）如果我运行您的代码，它似乎可以按预期工作。我可以看到按钮内的垂直填充在屏幕大小之间变化。我遗漏了什么吗？你能告诉我你是如何使用tailwind css的吗？它应该能起作用，因为我也试过了，它能起作用。我认为您可能没有正确构建css文件。我正在使用tailwindcss作为npm包。我按照文档中的安装说明在我的laravel项目中安装了tailwind。