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

If this is written correctly - my knowledge of RegEx is minimal, this config will save all p-, m-, bg- and, text- classes.
Excluding the variants like hover:text-gray-200, lg:mx-12, and so on.

Didn't have time to test this yesterday. But did today, and, yes this does indeed save all p-, m-, bg- and, text- classes upon build. 🙂
Adds around 40KB extra to the finished build. That does include all the margins, padding, background, and text classes you use in your project by default anyway so in the end it's not that much overhead IMHO.

TailwindCSS v2 will be using PurgeCSS v3 and won't have the whitelistPatterns option, instead, it will use the safelist key so I added a version for that as well. 👍

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 ↩