Atomic CSS-in-JS

先抛出一个新的概念Atomic CSS-in-JS，即原子化CSS。

为什么要使用原子化CSS，根据Facebook目前公开的数据：

他们旧版的登陆页面的CSS大小就达到了413Kb，而通过原子化重置后，它们的所有站点仅有74Kb，这还是在包含了暗黑模式的情况下。

Tailwind CSS是什么

Tailwind CSS是一种CSS原子化框架，它提供了大量的类名，可以让你在写一个前端项目时，不用去写或者写很少量CSS样式，你可以将你的核心业务放到功能编写上。

Tailwind CSS在这几个月持续受到关注，从NPM的包下载量上面来看使用人数也是呈极速上升趋势。

使用

安装

Tailwind官方安装引导。

现在Tailwind CSS的官网提供了很完善的安装流程，在之前我使用Tailwind的时候并不知道如何将它安装在项目中，而绕了很多圈子。

常用的几大框架都有对应的安装文档。

值得注意的是，如果你按照步骤安装完成后，启动项目如果提示：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

说明你项目脚手架中使用PostCss的版本低于8，那你就需要运行下面两条命令，重装你的Tailwind。

npm uninstall tailwindcss postcss autoprefixer

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

值得注意的是：Tailwind CSS的最新版本2.x已经不兼容IE11即以下的浏览器，如果需要兼容IE11则需要使用1.x版本。

预设

Tailwind CSS的文档写的非常全面，你需要使用到的CSS属性它都有对应的类，就算没有需要的你也可以自行添加。

预设动画

选择器

响应式

Tailwind UI

Tailwind官方已经给你提供了大量的界面和UI样式，可以直接将代码拷贝过去就

优点

在大概两个月前我就做了Tailwind CSS的介绍，就我个人而言，我非常喜欢Tailwind CSS的，因为它实在是太过于方便，免去了你写样式时需要上下滑动或者多个文件反复切换的苦恼（当然你的屏幕够大时，你可以开两个窗口进行编写）。

同时它在打包的时候如果你工程中自行编写的CSS文件比较庞大，如果你切换成为Tailwind CSS，会极大的减少你项目中CSS文件的体积，这是因为一个类名仅掌控一种样式，而这些类名你会在项目中反复用到，而不是每次编写一个DOM元素的样式时就去创建一个新的类。

还有一大优点是它提供了响应式前缀，可以很方便的将你的界面编写成为响应式界面，平时我们在用普通的媒体查询编写响应式界面时通常会调了这里那里样式不对，调了那里这里好像又变得不对的情况，使用Tailwind CSS就可以通过添加前缀，就可以完成响应式编写。

缺点

Tailwind CSS虽然好用，但是它有一个非常大的缺点，就是它自身提供的类名是非常有限的，并且它的默认单位是rem，这就导致如果一个项目要严格按照设计稿的尺寸来编写，它需要你手动添加大量的样式，也就是如果一个盒子的宽是375px，虽然你可以使用蓝湖这一类的工具将设计稿转换为rem为单位，375px如果按照16px的基准来转换就是23.4375rem。如果你需要严格参照设计稿，那么你就必须手动在tailwind.config.js文件中添加93.75: "23.4375rem"这一类的参数，如果你每次都要这么进行计算的话，那会是一个非常麻烦的事情，这个时候你会想：直接在tailwind.config.js文件中将1px~2000px全部添加进去不就好了嘛！

事实上是不行，tailwind.config.js文件中，你预设的样式越多，你项目启动的速度就会越慢，因为它会通过postcss进行大量的计算，我尝试过将1px~2000px全部填入配置文件中，每次启动项目的时间大概是在2~3分钟左右，直到后面我不得不放弃了这个计划。

最后

就我个人而言，Tailwind CSS这种原子化框架在未来一定是主流，因为Facebook已经将它们的项目通过这种形式进行重新优化，并且效果相当的明显。

参考文章：Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代