Tailwind CSS html section not taking padding bottom-CodePudding

I'm having issues with using tailwinds "pb" class to add bottom space/padding to the html section area. I have forced a style to overwrite the spacing by adding a style tag with a padding bottom of 100px in the element. How can I use tailwind pb or mb to create the bottom space in the section tag instead of adding a style tag.

HTML(TailwindCSS)

**<section  style="padding-bottom:100px;">
    <div >
        <h2 >
            Lorem ipsum dolor sit amet, onsectetur adipiscing elit
        </h2>
        <div >
            <div >
                <span >Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.</span>
                <span >Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.</span>
                <span >Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.?&nbsp;<a href="#" >Lorem ipsum</a>
                </span>
            </div>
        </div>
    </div>
</section>**

CodePudding user response：

There is no utility class by default for 100px so you can just use arbitrary values, https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

So the class to use in square bracket notation is pb-[100px].

If you will use that spacing in your project many times, you can also customize the spacing by configuring tailwind.conf.js as described here, https://tailwindcss.com/docs/customizing-spacing

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