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: [],
}