TailwindCSS / PurgeCSS whitelist not working

Question

I can't seem to get PurgeCSS to whitelist classes I use dynamically in the CMS.

Here are my config files:

/* postcss.config.js */

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-nested'), // or require('postcss-nesting')
    purgecss({
      content: [
        '**/*.twig',
      ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
      options: {
        whitelist: [
          'md:w-1/3',
        ],
      },      
    })
  ]
}

/* tailwind.config.js */

const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    container: {
      center: true,
    },
    extend: {
      fontSize: {
        '9xl': '10rem',
      },
      fontFamily: {
        'sans': ['Roboto', 'system-ui'],
      },
      lineHeight: {
        '11': '2.75rem',
        '12': '3rem',
        '14': '3.5rem',
      }
    }, 
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
}

Tried various solutions I found, but nothing seem to do the trick, it keeps purging the classes I add to the whitelist. Any suggestions anyone?

Based on https://tailwindcss.com/docs/optimizing-for-production#purge-css-options the option should be called `safelist` instead of `whitelist`. — Craig E, May 13 '21 at 22:40

score 1 · Accepted Answer · answered Dec 10 '21 at 14:35

1

I was using the wrong option name, it had to be safelist instead of whitelist.

answered Dec 10 '21 at 14:35

Jonathan

49
1
7

Please use the edit link on your question to add additional information. The Post Answer button should be used only for complete answers to the question. - [From Review](/review/late-answers/30556595) – Andrey Dec 12 '21 at 08:10

score 1 · Answer 2 · answered Jun 08 '22 at 13:18

As of today, I had to use the following code to safelist specific classes:

I used safelist on multiple classes I was using with random heights passed through React components as props.

module.exports = {
    content: ['./src/**/*.{js,jsx,ts,tsx}'],
    safelist: [
        {
        pattern:
            /h-(1|2|3|4)/,
        },
        {
        pattern:
            /w-(1|2|3|4)/,
        },
    ],
    theme: {},
    plugins: [],
};

TailwindCSS / PurgeCSS whitelist not working

2 Answers2