Tailwind CSS custom classes are not working on some iPhones. Is there a reason for this?

In general, for most devices, my Tailwind custom classes work however for iPhones like iPhone 7, iPhone x, and a few others it doesn't seem to work. Default classes are fine.

The issue is present for both Safari and Chrome. The custom classes are added in the Head tag. I have included it below.

I couldn't find anything from my searches but I wondered if anyone had any idea why this was happening?

This is my script tag.

<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        green: "#02594c",
        grey: "#333",
        yellow: "#fe0",
        purple: "#5F3DC4",
        orange: "#ff9800",
      },

      fontSize: {
        lg2: "1.1875rem",
        remtwo: "2rem",
      },
      margin: {
        xxl: "34rem",
        xxl2: "37rem",
        xxl3: "40rem",
        xxl4: "45rem",
        xxl5: "50rem",
        xxl6: "55rem",
        xxl7: "60rem",
        xxl8: "65rem",
        xxl9: "70rem",
      },
      gap: {
        110: "23rem",
        120: "27rem",
        130: "30rem",
        135: "32rem",
        140: "33rem",
      },
      fontFamily: {
        arial: ["arial"],
      },
      height: {
        xxl: "25rem",
        xxl2: "27rem",
        xxl3: "30rem",
        xxl4: "32rem",
        xxl5: "34rem",
      },
      width: {
        xl: "25rem",
        xxl: "30rem",
        xxl2: "37rem",
        xxl3: "38rem",
      },
      borderWidth: {
        xl: "323px",
        xxl: "400px",
      },
    },
  },
};
</script>