element ui需要引入样式吗_nuxt + tailwind + element-ui 踩了一个生成 css 的坑

我近两年很是认同 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 “框架”（其实是一种方法论）哦。