Useful TailwindCSS config that saves paddings and margins upon build

tailwind-v1.config.js

// https://v1.tailwindcss.com/docs/controlling-file-size#purge-css-options
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: {
    content: ['./public/**/*.html'],
    options: {
      whitelistPatterns: [
        /^\-?m(\w?)-/,
        /^p(\w?)-/,
        /^text-/,
        /^bg-/,
      ]
    }
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

tailwind-v2.config.js

// https://v2.tailwindcss.com/docs/optimizing-for-production#safelisting-specific-classes
module.exports = {
  purge: {
    content: ['./public/**/*.html'],
    options: {
      safelist: [
        /^\-?m(\w?)-/,
        /^p(\w?)-/,
        /^text-/,
        /^bg-/,
      ]
    }
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

tailwind-v3.config.js

// https://tailwindcss.com/docs/content-configuration#safelisting-classes
module.exports = {
  content: ['./public/**/*.html'],
  safelist: [
    'text-2xl',
    'text-3xl',
    { pattern: /^\-?m(\w?)-/ },
    { pattern: /^p(\w?)-/ },
    { pattern: /^text-/ },
    { pattern: /^bg-/ },
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

how to write a pattern for
p-[50px] or m-[50px]
and for all tailwind classes which can be written dynamic using square brackets like the above one.

@hari-d haven't used safelist myself for arbitrary values, but this thread¹ on Tailwind's discussions page could be useful for you.

Footnotes

1. Safelist pattern for arbitrary values - https://github.com/tailwindlabs/tailwindcss/discussions/7908 ↩