css - 如何获得 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

我遇到了同样的事情!
排版 README 中有关于此的说明:

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: []
    }
  },
}