填充和边距在断点上不起作用答案

【问题标题】：Padding and margin not working on breakpoints填充和边距在断点上不起作用
【发布时间】：2021-04-17 17:27:04
【问题描述】：

我正在使用 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>

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

在更大的设备上：

在较小的设备上：

【问题讨论】：

您能否将您的代码发布为文本 sn-p 而不是图像？让人们更容易提供帮助。
当然，对不起：')
如果我通过play.tailwindcss.com 运行您的代码，它似乎可以正常工作。我可以看到按钮内的垂直填充在屏幕尺寸之间变化。我错过了什么吗？
你能告诉你你是如何使用tailwind css的吗？它应该可以工作，因为我也尝试过 play.tailwindcss.com 并且它正在工作。我认为您可能没有正确构建 css 文件。
我使用 tailwindcss 作为 npm 包。我按照文档中的安装说明在我的 laravel 项目中安装了 tailwind。

标签： css laravel vue.js tailwind-css

【解决方案1】：

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

您将md:py-0 替换为md:py-2。

【讨论】：