tailwindcss: config - safelist in purgecss is ignored

Describe the problem:

The class hidden was purged from my production build and I didn’t spot that at first. Of course this happened because the word hidden doesn’t appear anywhere in my files. That is because I use a library which applies the class hidden when hiding elements, and didn’t think to include that library in the list files I tell purgeCSS to check in my tailwind.config.js.

I imagine I am not the only person in that situation, and thought of raising a ticket suggesting an exception for that class.

But then I tried adding hidden to the safelist, and found that doesn’t seem to do anything:

module.exports = {
  purge: {
    content:  [ ],
    options: {
      safelist: ['hidden', 'text-red-100'],
    }
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Link to a minimal reproduction:

Repo here: https://github.com/andyhasit/tailwindcss_bug

Look at package.json and check.sh to make sure I’m not evil.
Install with npm i
Use npm run build to produce out.css.
Use ./check.sh text-red-100 which will show you text-red-100 is in out.css (because it is in the file my-code, see config)
Use ./check.sh text-red-200 which will show you text-red-200 is not in out.css but should be because it is in safelist

Perhaps I am doing something silly?

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (1 by maintainers)

Most upvoted comments

@isaacjoh I’ve got it working with your solution. This is weird because the tailwind docs specifies as follows:

From https://tailwindcss.com/docs/optimizing-for-production#safelisting-specific-classes

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],
    safelist: [
      'bg-blue-500',
      'text-center',
      'hover:opacity-100',
      // ...
      'lg:text-right',
    ]
  },
  // ...
}

hwkd on Aug 10, 2021

@sk8Guerra i was able to make it work by putting safelist inside an options param:

options: {
  safelist: [
   'bg-gray-50',
    'bg-red-50',
    'bg-yellow-50',
    'bg-green-50',
    'bg-blue-50',
    'bg-indigo-50',
    'bg-purple-50',
    'bg-pink-50'
  ]
}

isaacjoh on Jul 7, 2021

Have you tried to use whitelist instead of safelist?

I think PurgeCSS changed this API option in v3. I see in your example that you’re using Tailwind 1.9, which is not using PurgeCSS 3, only Tailwind 2.x does.

https://github.com/FullHuman/purgecss/issues/439

sebsobseb on Nov 20, 2020

@aasmpro when using JIT mode, make sure the path to your data.js is in your purge list (btw, you can add whatever files… html, css, js, jsx, ts, tsx, vue, …). Otherwise Tailwind won’t scan the file, and won’t pick up your bg-red-0.

// tailwind.config.js
module.exports = {
    mode: 'jit',
   purge: [
     './src/**/*.{js,jsx,ts,tsx,vue}', // -> if your data.js is inside a /src/ this will work
     './**/datas/*.js', // -> match all js files in the folder "datas"
     './path/to/datas/data.js' // -> or provide full path
   ],
    theme: {
      // ...
    }
    // ...
}

https://tailwindcss.com/docs/just-in-time-mode

sebsobseb on Aug 12, 2021