config - safelist in purgecss is ignored

[andyhasit]

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

1. Look at package.json and check.sh to make sure I'm not evil.
2. Install with npm i
3. Use npm run build to produce out.css.
4. 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)
5. 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?

[sebsobseb]

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.

FullHuman/purgecss#439

[andyhasit]

Yes, that's it! I unfortunately need to support IE11, so I should have been following these docs: https://v1.tailwindcss.com/docs/controlling-file-size#purge-css-options

I'm trying to think whether there's a case for whitelisting "hidden" as a default setting given how common its usage is, but I think the view will be that it's probably up to libraries to make it clear they use 'hidden' or any other class, so will close this.

[sk8Guerra]

I'm using tailwindcss 2.1.1, and safelist doesn't work. My tailwind.config.js looks like this...

module.exports = {
  purge: {
    content: ['./src/**/*.js'],
    whitelist: [
      'bg-gray-50',
      'bg-red-50',
      'bg-yellow-50',
      'bg-green-50',
      'bg-blue-50',
      'bg-indigo-50',
      'bg-purple-50',
      'bg-pink-50',
    ],
  },
  ...
};

Any idea?

[sebsobseb]

@sk8Guerra use safelist instead of whitelist

[sk8Guerra]

@sebsobseb I've used safelist and still doesn't work. Now it looks like this:

const talwindPluginForm = require('@tailwindcss/forms');

module.exports = {
  purge: {
    content: ['./src/**/*.js'],
    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]

@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'
  ]
}

[sk8Guerra]

Thanks @isaacjoh! I was also able to solve it, like this.

[hwkd]

@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',
    ]
  },
  // ...
}

[aasmpro]

with using JIT mode, none of these examples solved my problem.
I'm trying to pass a class name from data files which are not in purge content files (because they are just js/json data files!).
any solution? :) @adamwathan
btw ty for tailwind.

data.js

export const data = {
	"class": "bg-red-0",
	...
}

component.jsx

import { data } from "../datas/data.js";
...

<div className={`${data.class}`}> ... </div>

[sebsobseb]

@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

[aasmpro]

@sebsobseb ty for ur answer! yeah that works and i had found it a little late! somehow that didn't work on my first try, but now everything works perfectly ;)

[vphilot]

@isaacjoh 's solution is the only way I was able to make it work.

[gurumark]

I have:
"purgecss": "^4.0.3",
"tailwindcss": "^2.2.15",
It does not work for me:
module.exports = {
purge: {
content: ["layouts/**/*.html"],
safelist: [
'ais-SearchBox-input',
'ais-SearchBox-submit',
'ais-SearchBox-loadingIndicator',
'ais-SearchBox-resetIcon',
'ais-SearchBox-submitIcon',
'ais-Hits.ais-Hits--empty',
],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require("tailwindcss-base-buttons")(),
require("@tailwindcss/typography"),
],
};
I've tried every solution. It simply ignores the safelist.

[isaacjoh]

Try it with the options param as others have stated has worked for them, including myself

…

On Tue, Sep 14, 2021, 9:32 AM gurumark ***@***.***> wrote: I have: "purgecss": "^4.0.3", "tailwindcss": "^2.2.15", It does not work for me: module.exports = { purge: { content: ["layouts/**/*.html"], safelist: [ 'ais-SearchBox-input', 'ais-SearchBox-submit', 'ais-SearchBox-loadingIndicator', 'ais-SearchBox-resetIcon', 'ais-SearchBox-submitIcon', 'ais-Hits.ais-Hits--empty', ], }, darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [ require("tailwindcss-base-buttons")(), ***@***.***/typography"), ], }; I've every solution. It simply ignores the safelist. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2829 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD2AS4NIMFGVNXL6Z6XBVJDUB52IDANCNFSM4T4AEJCQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[gurumark]

I tried it with the options parameter too. None of the solutions on this page worked for me. I ended up hardcoding CSS comments. But it is a bug.

[lingster]

In case anyone ends up here, this is what works with tailwind>2.0 and purgecss > 3.x:

  purge: {
        content: ["./src/**/*.{html,js,svelte,ts}",],
        enabled: true,
        options: {
            safelist: {
                standard: [/^grid-col/, /^grid-row/, "bg-dark-grey", "bg-light-grey"]
            }
        }
    },

and here is the link to purge css:
https://purgecss.com/safelisting.html#safelisting
note that safelist accepts a dictionary with specific keys....

[simonswiss]

with using JIT mode, none of these examples solved my problem. I'm trying to pass a class name from data files which are not in purge content files (because they are just js/json data files!). any solution? :) @adamwathan btw ty for tailwind.

data.js

export const data = {
	"class": "bg-red-0",
	...
}

component.jsx

import { data } from "../datas/data.js";
...

<div className={`${data.class}`}> ... </div>

Late to the party, but I thought I'd mention that in JIT, you can move the safelist array up one level, directly within the purge object.

The options used to be sent directly to PurgeCSS, but JIT mode in Tailwind doesn't use PurgeCSS anymore.

This will change again in the upcoming Tailwind CSS 3.0 release, but for now, if you want your safelist to be respected in Tailwind v>2.2, you can move the safelist from purge.options.safelist to purge.safelist 👍