TailwindCSS / PurgeCSS 白名单不起作用
Posted
技术标签:
【中文标题】TailwindCSS / PurgeCSS 白名单不起作用【英文标题】:TailwindCSS / PurgeCSS whitelist not working 【发布时间】:2021-08-03 15:14:33 【问题描述】:我似乎无法让 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'],
,
尝试了我找到的各种解决方案,但似乎没有任何效果,它不断清除我添加到白名单中的类。有什么建议吗?
【问题讨论】:
基于tailwindcss.com/docs/…,该选项应称为safelist
,而不是whitelist
。
谢谢!这解决了它。
【参考方案1】:
我使用了错误的选项名称,它必须是 safelist
而不是 whitelist
。
【讨论】:
请使用您问题上的编辑链接添加其他信息。 Post Answer 按钮应仅用于问题的完整答案。 - From Review以上是关于TailwindCSS / PurgeCSS 白名单不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Laravel Mix、TailwindCSS 和 PurgeCSS
javascript 用于AdonisJS的Laravel Mix + TailwindCSS + PurgeCSS资产管道配置
即使在 PurgeCSS 之后,TailwindCSS 构建的 css 文件也太大了