对于 Tailwind 和 PostCSS/PurgeCSS 来说相当新,所以希望这是一个相当简单的修复。
In my tailwind.config.js
,我扩展了一些间距值,包括添加 0.5 值以与默认的 Tailwind 间距比例对齐。我的文件如下所示(摘录):
module.exports = {
important: false,
theme: {
spacing: {
'0.5': '0.125rem',
},
},
}
然后我使用 PostCSS 编译我的 CSS,如下所示,你可以看到我使用了一堆效果很好的插件:
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-import'),
require('postcss-nested'),
require('postcss-responsive-type'),
require('tailwindcss'),
require('autoprefixer'),
require('cssnano'),
]
}
到目前为止,一切都进展顺利!但是,我想清除 css 以删除 Tailwind 创建的所有未使用的实用程序类。这对我的 postcss 文件产生如下影响:
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-import'),
require('postcss-nested'),
require('postcss-responsive-type'),
require('tailwindcss'),
require('autoprefixer'),
require('@fullhuman/postcss-purgecss')({
content: [
'./*.php',
'./**/*.php',
],
defaultExtractor: content => content.match(/[\w-:/]+(?<!:)/g) || []
}),
require('cssnano'),
]
}
此时我丢失了一些样式,特别是专门配置的 Tailwind 样式,例如 .h-0.5。
我怀疑问题出在 defaultExtractor 行内?
defaultExtractor: content => content.match(/[\w-:/]+(?<!:)/g) || []
有人可以帮忙吗?
谢谢