前言
Tailwindcss v2.1发布，最大的更新就是把原来的jit插件以一种mode的方式合并到主题程序中了。也就是说Tailwindcss添加了一种编译模式。当然除了这个，还有其他有趣的功能和特性。下面一起看看。
just in time模式
老版本思路
Tailwindcss是通过读取配置文件，预生成所有的css类，提供给开发者使用，然后打包的时候，通过postCss的pure插件，来tree-shaking清除那些未使用的css类，从而大大简化最终生成的css文件。
听起来好像没什么问题，但是你真的使用过Tailwindcss的话，那就会发现，开发环境中，生成的类可能有3566K左右，当变更配置文件的时候，尤其是当你配置很多颜色或者变体variant的时候，重新生成可能很长时间，几秒到几十秒不等。
Tailwind can take 3–8s to initially compile using our CLI, and upwards of 30–45s in webpack projects because webpack struggles with large CSS files.
这显然是不能接受的。
jit思路
新推出的jit模式，采用的思路是，不预先生成任何css类，你要用到什么，再生成什么，真正的按需生成，just in time。这个模式的编译时间超级快。
This library can compile even the biggest projects in about 800ms (with incremental rebuilds as fast as 3ms), no matter what build tool you're using.
使用
使用起来非常简单，只需要在原来的配置文件添加一个配置项即可。然后就可以开始享受丝滑的编译速度了。
// tailwind.config.js
module.exports = {
mode: 'jit',
purge: [
// ...
],
theme: {
// ...
}
// ...
}
注意：由于jit模式需要扫描文件来按需生成CSS类，所以必须要通过purge配置项指定需要扫描的文件夹，否则就不会生成任何CSS类。
变体（variant）开箱即用
很多变体如focus-visible active disabled等是没有默认开启的，因为变体会大大增加css文件体积，所以很多时候你需要手动去开启各种你需要用到的变体。由于是按需生产的，你可以很轻松的开箱即用任何变体，比如sm:hover:active:disabled:opacity-75，再也不用担心体积和速度问题。
所写即所得
不用自定义CSS，就可以生成样式。在使用Tailwindcss的过程中，如果一些特殊的地方需要用到特殊的尺寸，比如margin-top:-113px，你不需要再去为他自定义一个CSS类，由于是按需生产的，你可以用方括号表示法来生成一个类，比如top-[-113px]，md:top-[-113px]
没有环境差异
由于是按需生成CSS类，所以你在开发环境生成的跟生产环境的是一样的，因为不需要清除未使用的样式,所以不用担心意外清除导致生产环境不一致的情况。
总结
新版本很大程度提升了开发效率，这更加是时候“入手”Tailwindcss了。
我是一个Tailwindcss的粉丝，当我看到它的时候，我感觉打开了新世界的大门，看到了很多可玩性。如果你也是，那么欢迎一起讨论研究。
那些没有真正写过Tailwindcss的人，如果你们在徘徊犹豫，或者嗤之以鼻，就像作者说的，给它一个机会，去用一下。再多的文章，说再多的好处，都不及你真正上手把玩一下。
I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you'll wonder how you ever worked with CSS any other way.
在2.0+版本的时候，我尝试去翻译它的官方文档，进行到一半的时候，出了2.1版本。。。
如果能帮助到人，我会继续进行下去，并且同步2.1版本。Just let me know!
