今年找工作真的太难了，即使面到好多hr面，最后还是无疾而终；所以目前收到一份工作后就先屁颠屁颠的去了！目前已经入职一个星期了，之前有了解过tailwindcss，本来还想着入职新公司后，可以推广一波，没成想新公司已经在使用了
tailwindcss 目前已经发展到3.0 版本了，这个功能类优先的css框架可以给我们带来最直观的优点如下：
1，命名麻烦；我们之前开发，但凡设置一个div样式，都需要命名一个className，开发即要避免名称冲突，又要符合一定的语义；
2，css文件体积小；用tailwindcss 之后，我们开发中许多的css样式可以直接复用，最终打包生成的css文件体积会缩小很多，在资源加载性能方面会提高很多；
3，易于扩展调整和改变；对于一些整体UI风格颜色切换将更加灵活方便；
4，响应式媒体查询使用更方便；
5，IDE插件提供智能化的友好提示；
6，tailwind UI 提供一套UI组件模版；
缺点的话，使用原子样式会让我们的代码阅读上增加些难度，因为我们通常会用语义化的className提高代码阅读性；
安装
npm install -D tailwindcss@latest
（1）然后作为postcss插件来使用
（2）因为我们公司用的是 nuxt.js，所以我们是在nuxt.comfig.js中的buildModules
modules.export{
...
buildModules: ['@nuxtjs/tailwindcss'],
}
自定义样式
tailwind虽然已经提供了非常多的class样式，它同时也支持我们自定义一些全局的样式，我们可以在nuxt.config.js 中的css配置下引入
自定义配置nuxt.config.js
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
生产优化
在tailwind.config.js 中配置purge，会开启tree sharking 删除未使用的css
还有哪些原子样式的css框架
windicss：是从零开始编写的tailwind css的替代方案，零依赖，不需要安装postcss, autoprefixer；支持按需生成
unocss： 是一个引擎，而非一款框架；默认的 @unocss/preset-uno 预设，是一系列流行的原子化框架的通用超集，包括了 Tailwind CSS，Windi CSS，Bootstrap，Tachyons 等；所以这些css框架的原子样式都可以使用；
从内部实现上看，Tailwind 依赖于 PostCSS 的 AST 进行修改，而 Windi 则是编写了一个自定义解析器和 AST。考虑到在开发过程中，这些工具 CSS 的并不经常变化，UnoCSS 通过非常高效的字符串拼接来直接生成对应的 CSS 而非引入整个编译过程。同时，UnoCSS 对类名和生成的 CSS 字符串进行了缓存，当再次遇到相同的实用工具类时，它可以绕过整个匹配和生成的过程。
none 8.75 ms / 0.00 ms
unocss v0.0.0 13.72 ms / 4.97 ms (x1.00)
windicss v3.1.9 980.41 ms / 971.66 ms (x195.36)
tailwindcss v3.0.0-alpha.1 1258.54 ms / 1249.79 ms (x251.28)
从结果来看，UnoCSS 可以比 Tailwind 的 JIT 引擎快 200 倍！
但是UnoCSS不提供的 @apply 预处理，IDE 智能提示，预处理等功能，所以可以使用windicss框架作为补充；所以我们可以期待一下 WindiCSS v4，它会以UnoCSS作为引擎；
但就如windicss作者所言，Tailwind CSS目前仍然是一个巨人，它有超过 3,000 次提交和 100 多个贡献者；在github上，Tailwind CSS有 54.7K star ，Windi CSS 有4.8k ;Tailwind CSS 就目前而言依然是主流！
