我近两年很是认同 tachyons 这类所谓 atomic CSS 的样式原则，然后最近发现一个 tailwind 甚是喜欢，主要我自己也认为 CSS 很难，用 tachyons 的时候就是直接对着 tachyons.css 文件去搜索属性查需要加哪个 class，而 tailwind 的话他那个手册也差不多相当于大半个 CSS 基础教程了，用的时候多查查文档也每天进步了。实际上 tailwind 作者就说开始做 tailwind 就是因为 tachyons 没法配置以及没有一个清晰的引导……

扯远了。总之这个项目，直接 tailwind。因为是后台，再加上 element-ui。

项目初始化的方式……我就在空目录下用 npx create-nuxt-app 命令跟引导来，单独生成了 CSS 框架选择 tailwind 和 element-ui 的两个项目，然后手工合在一起。这里如果 create-nuxt-app 在选 CSS 框架的时候能多选就好了……

开发时用起来没啥毛病，简单写了点页面准备发布了，尝试用 nuxt generate 去生成，结果生成的静态文件一看傻眼了。element-ui 的样式绝大多数没有，奇怪的是 icon 之类的又是有的。折腾了半天发现，原来 buildModules 参数如果带上 @nuxtjs/tailwindcss，将会自动引入 purgecss，这个编译插件对于纯用 tailwind 的项目是很好的，但如果配合其他第三方库用可能就要傻眼了。好在 element 的 class 应该都是用的 BEM 来写的吧，都有 .el-前缀，于是在 nuxt.config.js 文件添加配置：

  purgeCSS: {
    whitelistPatterns: [/el-.+$/],
    whitelistPatternsChildren: [/el-.+$/],
  }

解决问题。

--

其实也就是个推特或者微博分享一句就能说完的问题（使用 @nuxtjs/tailwindcss 项目记得配置 purgeCSS 哦～），但想到可能有人遇到同样问题尝试搜索引擎，分享成文章会更容易曝光一点。另外一个是，也分享一下给大家推荐用 tailwind 这个 CSS “框架”（其实是一种方法论）哦。