TailwindCSS/PurgeCSS白名单不起作用

Question

我似乎无法将PurgeCSS添加到我在CMS中动态使用的白名单类中。

以下是我的配置文件：

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

尝试了我找到的各种解决方案，但似乎没有什么效果，它不断清除我添加到白名单中的类。有什么建议吗？

Answer 1

我使用了错误的选项名称，它必须是safelist而不是whitelist。

Answer 2

从今天起，我必须使用以下代码来处理safelist特定的类：

我在多个类别上使用了安全列表，我使用的是React组件作为道具的随机高度。

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