如何获得 Tailwind 的内置 CSS Purge 来清除插件 CSS

Question

我使用 PostCSS 在我的项目中包含 Tailwind CSS，并让 Tailwind 的内置 Purge 实现非常适合核心库（style.pcss如下所示）。但是，我也将其@tailwind/typography作为插件包含在内，并且它的选择器不会被清除。

// postcss.config.js

const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'), 
    process.env.NODE_ENV === 'production' ? require('autoprefixer') : null,
    process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : null
  ]
}

// tailwind.config.js

module.exports = {
  plugins: [
    require('@tailwindcss/typography')
  ],
  purge: [
    './build/*.html',
    './build/**/*.html'
  ],
}

// style.pcss

@tailwind base;
@tailwind components;
@tailwind utilities; 

Answer 1

我遇到了同样的事情！

版式自述文件中有关于此的注释：

https://github.com/tailwindlabs/tailwindcss-typography#purging-unused-styles

...以及 tailwindscss 文档中的更多详细信息：

https://tailwindcss.com/docs/controlling-file-size#removing-all-unused-styles

tailwind.config.js您可能应该如下所示：

module.exports = {
  plugins: [
    require('@tailwindcss/typography')
  ],
  purge: {
    enabled: true,
    mode: 'all',
    content: [
      './build/*.html',
      './build/**/*.html'
    ],
    options: {
      whitelist: []
    }
  },
}