VueCLI 4.x下正确使用TailwindCSS和PurgeCSS示范

2020 年 12 月 23 日补充

今天有个同事参考我的配置搭一个项目，除了没有用到 TailwindCSS，其它一样，却没办法成功运行，错误提示“ Error: PostCSS plugin postcss-purgecss requires PostCSS 8. ”，不明白怎么回事。然后经过排查，发现，之前我搭建项目的时候还是 @fullhuman/postcss-purgecss 3.0.0 ，安装完成后会自动带上 PostCSS 的依赖，而同事装完默认最新 3.1.3 版，却没有 PostCSS 的依赖，导致错误发生，这个现象很奇怪，网上没找到解决方案，理论上即便如此，手动安装 PostCSS 8 应该也是可以的。却不行，如果你也遇到这个问题，不妨安装指定版本也就是 3.0.0 版本就好了。

之前做过 VueCLI 3.x 下的一个配置，后来发现出问题了，于是这几天看了一下相关文档，升级了一下最新的搭配，目前来看还是挺完美的，对于追求项目体积的朋友，可以尝试一下。

核心内容介绍

本文对应的内容可以在我的 github 个人项目my-cli中找到。

首先重头戏是PurgeCSS，这是一个不错的**移除无用 CSS 样式(Remove unused CSS)**的插件，起初是在学习 TailwindCSS 过程中看到的，虽然他的设计会有一丁点不完美（通过正则匹配 class 来进行检查，在某些复杂的语法下可能出现不可预料的未知错误），不过大部分场景表现良好，所以还是可以放心使用的。

其次是TailwindCSS，我的博客就是用的这个 CSS 框架，上手理解还是不难的，也推荐使用。

最后是PostCSS了，想必大家都不陌生，实际上在 VueCLI 4.x 内部已经集成，更多关于 PostCSS 的教程也可以参考我 2017 年写的一系列教程PostCSS 自学笔记（一）【安装使用篇】，随着时间推移，毕竟过去三年了，可能有些内容会有变化，不过很多内容还是值得了解的。

操作环境

macOS 版本：10.15.7
Node.js 版本：v14.15.0
VueCLI 版本：@vue/cli 4.5.6
TailwindCSS 版本：1.9.6

特别注意，11 月 19 日发布了 TailwindCSS 2.x ，官方已经要求需要 PostCSS 8 支持，虽然我尝试了直接升级暂时没发现问题，不过还需要保持关注。

搭建项目

我印象中，从 VueCLI 3.x 开始就多了一个 vue ui 命令来查看管理 vue 项目，你可以通过 vue create my-project 创建一个项目，并进行初始化的相关配置选择，也可以通过 vue ui 的新建项目来创建，这都不重要，重要的是建好项目后，如何正确安装 tailwindCSS 和 purgeCSS 这两个“模块”。

通过可视化操作安装

在 vue 项目管理界面中选中项目，左侧菜单点击插件，右侧右上角添加插件，输入 purgecss 可以看到下图

@fullhuman/vue-cli-plugin-purgecss插件安装

选中其中的 @fullhuman/vue-cli-plugin-purgecss 并点击底部安装，进行安装，装好后，再次点击完成安装，完成全部安装过程（会提示正在调用 @fullhuman/vue-cli-plugin-purgecss...）。

这时候观察依赖文件 package.json 会发现devDependencies中多了两个：

"devDependencies": {
  "@fullhuman/postcss-purgecss": "^3.0.0",
  "@fullhuman/vue-cli-plugin-purgecss": "^3.0.1",
  ...
}

**特别注意，这个是没有问题的！**也就是说，你要么严格按照 PurgeCSS 官方文档中 Vue 安装向导里的方式来，如果手动 npm i 的话，则需要执行：

npm i -D @fullhuman/postcss-purgecss @fullhuman/vue-cli-plugin-purgecss

千万不能手动安装的时候少装一个，关于这个问题，官方 github 的 issues 也有很多提问者。

安装完插件，另一个就是 tailwindcss 库了，这个简单，你同样可以在界面上的依赖菜单执行安装，不过这个问题不大，通过命令安装 npm i tailwindcss 就好了。

如果要通过界面安装，注意装完后选择自动生成的配置文件，可以选择 minimal 。

接下来创建一个基础的 tailwindcss 配置文件 tailwind.config.js ，可以通过命令 npx tailwindcss init 创建，也可以手动创建，更多可以参考Create your Tailwind config file (optional)，文件内容大致如下：

// tailwind.config.js
module.exports = {
  future: {},
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

最后，进行关键的配置工作，这里直接修改 vue.config.js 文件即可，修改的内容大致如下：

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './public/**/*.html',
    './src/**/*.vue'
  ],
  defaultExtractor(content) {
    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '');
    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [];
  },
  safelist: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/]
});

module.exports = {
  // ...your other config
  css: {
    postcss: {
      plugins: [
        // eslint-disable-next-line global-require
        require('tailwindcss')('./tailwind.config.js'),
        ...process.env.NODE_ENV === 'production' ? [purgecss] : []
      ]
    }
  }
},
// ...your other config

到此大功告成。运行项目进行测试看看有无问题，懒得自己弄的，也可以直接 Clone 我的 github 个人项目my-cli进行尝试。

简单说明一下，上面的配置中， PurgeCSS 仅在生产环境下才会生效。直接运行 npm run build ，可以看到 output 日志中的 css 非常小，你完全可以在 vue 文件写一些组件中没有用到的样式，看看 dist 目录中的 css 是否有生成出来。

另一个安装方案

这个就相对傻瓜一些，是第三方封装的插件，也是刚才上面图中第一个插件 vue-cli-plugin-tailwind ，这个并不是最优推荐，因为二次封装的东西，总有可能出现更多的问题，不过目前来看，会方便很多。

同样的操作，在刚才可视化界面上安装这个插件，安装vue-cli-plugin-tailwind 说明，然后再在项目下创建一个 postcss.config.js （当然 VueCLI 会自动读取配置），然后修改文件内容如下：

module.exports = {
  plugins: {
    tailwindcss: {},
    'vue-cli-plugin-tailwind/purgecss': {
      content: ['./public/**/*.html', './src/**/*.vue'],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [],
    },
    autoprefixer: {},
  },
}

基本上就 OK 了，更多内容见文档。

总结

VueCLI 内部集成了很多功能，了解并掌握 vue.config.js 的配置非常重要， TailwindCSS 作为一个后起的 CSS 库，也是值得学习的，那 PurgeCSS 对于追求极致的帮助很大，整体搞下来，相信你的项目会更加优秀~