Tailwind CSS中section标签pb类不生效 如何设置底部内边距

核心原因 #

pb类不生效基本都是踩了以下两个常见坑：

• Tailwind 默认内置的间距刻度没有100px对应的预设类。默认间距以4px为步进单位，pb-24 对应96px，pb-28 对应112px，不存在默认的pb-100类，写了也不会生成对应样式。
• 混淆pb和mb的作用场景，或是类名拼写错误、被更高优先级的全局样式覆盖。

直接替换方案（无需改配置） #

Tailwind 3+ 版本默认支持任意值语法，直接删掉section上的内联style，在class里加pb-[100px]即可，和你写的内联padding-bottom:100px效果完全一致，不需要额外写自定义样式。

如果加了类还是不生效，大概率是有全局样式给section设置了padding重置，可以写成!pb-[100px]提升样式优先级强制生效。如果用的是Tailwind 2版本，需要先在tailwind.config.js里开启JIT模式：mode: 'jit'，才能使用任意值类语法。

修正后的代码：

<section class="bg-formBgBlack flex pb-[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>

长期使用优化 #

如果项目里多处用到100px的间距，可以在tailwind.config.js里扩展自定义间距，之后就可以直接用pb-100、mb-100这类类名，不用每次写方括号任意值：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 其他原有配置
  theme: {
    extend: {
      spacing: {
        100: '100px',
      }
    },
  }
}

pb 和 mb 的选择参考 #

• 需要给section内部内容和section底部边缘留空白，用pb（内边距）
• 需要给当前section和下方相邻的其他元素留空白，用mb（外边距）

内容的提问来源于stack exchange，提问作者saiyan101