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

问题描述

我在使用PostCSS的项目中包含Tailwind CSS，并使Tailwind的内置Purge实现非常适合核心库（在下面的data: () => ({ lineas: [ {text: 'Fecha',align: 'start',sortable: true,value: 'fecha',color: 'red-line'},{text: 'Descripción',sortable: false,value: 'descripcion',color: 'blue-line'},],}) 中）。但是，我还将<style> .blue-line td { color: green; } .red-line td{ color: red; } </style> 作为插件包括在内，并且其选择器没有被清除。

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
  ]
}

解决方法

我遇到了同样的事情！

自述字体中有关于此的注释：

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