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?
I was using the wrong option name, it had to be safelist
instead of whitelist
.