Tailwind 3.4.3, Vue 3.4.25

I have 2 Vue projects. One is an admin that creates pages and the other is the client that displays the pages.

In my admin project, the px rules are being generated just file (i.e px-6, px-4 etc) along with all the other tailwind rules. The pages html is stored in a database.

On the client, when i retrieve the html and display it like this:

  <section v-html="thehtml"></section>

The page loads fine and the tailwind rules are applied, except for one. The padding(left/right) rules (px-6,px-4 etc) are not being generated. ALL other rules, including py (padding top/bottom) are being generated as expected.

Here is the tailwind.config.js for both projects:

            export default {
              content: [
                "./public/**/*.html",
                "./src/**/*.{vue,js,ts,jsx,tsx}",
            ],
            theme: {
              extend: {
                padding: {
                  DEFAULT: "15px",
                  sm: "15px",
                  lg: "15px",
                  xl: "0",
                  "2xl": "0",
                },
                screens: {
                  sm: "640px",
                  md: "768px",
                  lg: "1024px",
                  xl: "1280px",
                  "2xl": "1280px",
                },
                maxWidth: {
                  10: '10%',
                },
                minWidth: {
                  30: '30%',
                  50: '50%',
                  60: '60%',
                  70: '70%',
                  80: '80%',
                  90: '90%',
                },
                fontFamily: {
                  calibri: ["Calibri", "sans-serif"],
                },
              },
            },
              plugins: [],
            }

This is very confusing. Why are my padding rules for left/right only are not being generated when all other rules including padding top/bottom are being generated?

Thanks