PurgeCSS removing Tailwind font in next.js

I have a next.js site I am building that uses a specific text as below,

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['SFMono-Regular', 'Menlo', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        // indigo: '#7D00FF',
        blue: '#51B1E8',
        red: '#FF0E00',
      },
    },
  },
  plugins: [
    require('@tailwindcss/ui'),
  ]
}

For some reason the text style is being purged when it is deployed to Vercel. This is the purge css config.

module.exports = {
    plugins: [
      "postcss-import",
      "tailwindcss",
      "autoprefixer"
    ]
  };

  const purgecss = [
    "@fullhuman/postcss-purgecss",
    {
      content: [
        './pages/**/**/*.{js,jsx,ts,tsx}',
        './pages/**/*.{js,jsx,ts,tsx}',
        './pages/*.{js,jsx,ts,tsx}',

        './components/**/**/*.{js,jsx,ts,tsx}',
        './components/**/*.{js,jsx,ts,tsx}',
        './components/*.{js,jsx,ts,tsx}',
        ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    }
  ];
  module.exports = {
    plugins: [
      "postcss-import",
      "tailwindcss",
      "autoprefixer",
      ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
    ]
  };

What is going on?

Thanks in advance,

I was able to solve this by adding html and body to the safelist in settings.

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: [
    // './src/**/*.html',
    './pages/**/*.vue',
    './layouts/**/*.vue',
    './components/**/*.vue'
  ],
  safelist: ['html', 'body'],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})

Be careful which version of purgecss you have (check package.json): There was a change from whitelistPatterns to safelist which took me some time to find out