tailwindcss的打包优化，从几MB到几十KB

主要用到的工具是purgeCss，是一个用来删除未使用的CSS代码的工具

点我直接看文档

这个工具中主要用到postcss那一块，记得安装的时候区分postcss版本。

如果使用的postcss版本是<8的，安装如下↓

npm i -D @fullhuman/postcss-purgecss@3.0.0

如果用的postcss版本是>=8，安装如下

npm i -D @fullhuman/postcss-purgecss@4.0.0 // 或者大于4.0都行

然后在postcss.config.js中使用以下配置

const purgecss = require('@fullhuman/postcss-purgecss')module.exports = {    plugins: [        ... // 你的其它配置        purgecss({            content: ['./public/**/*.html', './src/**/*.vue'],        })    ]}

然后你重新打包的时候，你就会发现小了好多

看以下对比图

优化前：

优化后：

好，就这样。

各位大佬有什么更好的优化手段欢迎评论区赐教