如何对自定义构建的Tailwind CSS执行purge操作缩小文件体积

第一步：修正tailwind.config.js配置 #

你当前配置中purge数组包含输出产物./public/tailwind.css是错误的，purge的作用是扫描源代码匹配已使用的Tailwind类，仅需保留源文件路径，同时配置生产环境自动触发规则：

// tailwind.config.js
module.exports = {
  purge: {
    // 仅生产环境开启purge，开发环境保留全量类方便调试
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './src/**/*.{js,jsx,ts,tsx,css}', 
      './public/index.html'
    ]
    // 如果有动态生成的类需要保留，可添加safelist
    // safelist: ['bg-red-500', 'text-xl']
  }
}

你的craco.config.js和css源文件里的@tailwind指令配置无需修改，保持现有内容即可。

第二步：修正package.json脚本命令 #

你当前的build-css、watch-css命令格式错误，craco不支持直接编译输入css文件，两种修正方案可选：

方案A：使用postcss-cli单独编译css（适合需要独立输出css到public目录的场景） #

1. 安装依赖：
   npm install postcss-cli cross-env --save-dev
2. 修改scripts配置：

"scripts": {
  "start": "yarn run watch-css & craco start",
  "build": "cross-env NODE_ENV=production yarn run build-css && craco build",
  "test": "craco test",
  "eject": "react-scripts eject",
  "build-css": "postcss src/index.css -o public/tailwind.css",
  "watch-css": "postcss src/index.css -o public/tailwind.css --watch"
}

cross-env用于兼容Windows系统的环境变量设置，Mac/Linux可直接写NODE_ENV=production

方案B：依托craco全链路处理（更推荐的React项目用法） #

1. 在项目入口文件src/index.js中引入css源文件：
   import './index.css'
2. 删除package.json中build-css、watch-css相关脚本，简化后的scripts：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

craco会自动在构建流程中完成css编译、purge、压缩操作，无需单独处理css输出。

第三步：执行生产构建 #

直接运行build命令即可触发purge：
yarn build
构建完成后，输出的css文件会自动移除所有未使用的Tailwind类，体积可从4MB降到100KB以内。 #

内容的提问来源于stack exchange，提问作者Syed Danish Ali Jr.