即使在PurgeCSS之后，TailwindCSS仍会构建css文件太大

Question

在我的create-react-app应用程序中，我使用Tailiwnd CSS进行样式设置。不幸的是，在运行npm run build之后，css文件大小约为1,4mb，这太大了。在查看了该构建文件之后，我可以看到所有未使用的类仍然存在，

这是package.json中的脚本：

  "scripts": {
    "build:css": "postcss src/tailwind.css -o src/tailwind.generated.css",
    "watch:css": "postcss src/tailwind.css -o src/tailwind.generated.css --watch",
    "env:dev": "cross-env NODE_ENV=development",
    "env:prod": "cross-env NODE_ENV=production",
    "react-scripts:start": "sleep 5 && react-scripts start",
    "react-scripts:build": "react-scripts build",
    "start": "run-p env:dev watch:css react-scripts:start",
    "build": "run-s env:prod build:css react-scripts:build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

为了最小化构建css文件的大小，我使用带有以下postcss.config.js的Purge CSS：

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./public/**/*.html'],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    // Purge and minify CSS only production builds only
    ...(process.env.NODE_ENV === 'production'
      ? [purgecss, require('cssnano')]
      : [])
  ]
};

这里是tailiwnd.config.js：

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
    './src/**/*.js'
  ],
  theme: {
    extend: {
      height: {
        '72': '18rem',
        '80': '20rem',
        '88': '22rem',
        '96': '24rem',
        '104': '26rem'
      },
      fontFamily: {
        display: 'Raleway, sans-serif'
      }
    }
  },
  variants: {},
  plugins: []
};

我所有的JavaScript文件都位于./src文件夹中。您是否知道CSS构建文件为何仍然那么大？我只使用了Tailiwnd中的几个类，该应用程序本身非常简单小巧，

谢谢！

Answer 1

在postcss.config的第二行中，您仅引用.html文件。您应该将与windg配置有关的purgCSS的所有内容移到postcss配置中。