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

Thanks it really help me

Thanks really useful. Just as fyi I guess you don't need to escape the initial - in:
/^\-?m(\w?)-/, so can be
/^-?m(\w?)-/

FYI the syntax seems to have changed in v3.

This is what worked for me:

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}", "./**/*.php"],
  
  // Save padding, margin, text and bg classes from purging
  safelist: [
    { pattern: /^\-?m(\w?)-/ },
    { pattern: /^p(\w?)-/ },
    { pattern: /^text-/ },
    { pattern: /^bg-/ },
  ],

Quite necessary feature to have when I want to allow all 0-96 margin classes for my editors.

FYI the syntax seems to have changed in v3.

Quite right, it did. I had forgotten about this gist so haven't updated it. Thanks for reminding me about it, added your code to a new file. 👍 With a mix of what's in the documentation.

This page was the first hit for whatever I googled. Something along the lines of "tailwind don't purge padding classes". It did a great job at pointing me in the right direction :)

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 ↩