“顺风CSS html”一节不带填充底部

Question

我在使用"pb“类将底部空间/填充添加到html部分区域时遇到了问题。我通过在元素中添加一个填充底部为100 of的样式标记，强迫样式覆盖空格。如何使用顺风pb或mb在节标签中创建底部空间而不是添加样式标记。

HTML(TailwindCSS)

**<section class="bg-formBgBlack flex" style="padding-bottom:100px;">
    <div class="max-w-6xl px-5 mx-auto mt-10">
        <h2 class="text-2xl font-bold text-center text-white pb-8 md:text-4xl">
            Lorem ipsum dolor sit amet, onsectetur adipiscing elit
        </h2>
        <div class="flex container bg-white p-6 mx-auto rounded-lg max-h-full">
            <div class="px-0 pt-8 pb-8 md:pt-16 md:px-32">
                <span class="text-gray-700 uppercase flex text-left text-xs md:text-sm">Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.</span>
                <span class="text-black font-bold flex text-left text-2xl md:text-2xl">Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.</span>
                <span class="text-gray-700 flex pt-2 pb-2 text-left text-xs md:text-sm">Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.?&nbsp;<a href="#" class="no-underline text-signUpGreen">Lorem ipsum</a>
                </span>
            </div>
        </div>
    </div>
</section>**

Answer 1

默认情况下，100 no没有实用程序类，所以您可以只使用任意值，https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values。

所以在方括号符号中使用的类是pb-[100px]。

如果要在项目中多次使用该间距，还可以通过配置tailwind.conf.js (如这里所述的https://tailwindcss.com/docs/customizing-spacing )来自定义间距。

module.exports = {
  theme: {
    extend: {
      spacing: {
        '25': '6.25rem',
      }
    }
  }
}