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 文件也太大了

TailWindCSS 超级配置

Rails6 - PurgeCSS 忽略来自 image_pack_tag 的样式

purgecss CLI -c 找不到模块 purgecss.config.js