Tailwindcss发布了2.1版本，是时候“入手”了

前言

Tailwindcss v2.1发布，最大的更新就是把原来的jit插件以一种mode的方式合并到主题程序中了。也就是说Tailwindcss添加了一种编译模式。当然除了这个，还有其他有趣的功能和特性。下面一起看看。

just in time模式

老版本思路

Tailwindcss是通过读取配置文件，预生成所有的css类，提供给开发者使用，然后打包的时候，通过postCss的pure插件，来tree-shaking清除那些未使用的css类，从而大大简化最终生成的css文件。

听起来好像没什么问题，但是你真的使用过Tailwindcss的话，那就会发现，开发环境中，生成的类可能有3566K左右，当变更配置文件的时候，尤其是当你配置很多颜色或者变体variant的时候，重新生成可能很长时间，几秒到几十秒不等。

这显然是不能接受的。

jit思路

新推出的jit模式，采用的思路是，不预先生成任何css类，你要用到什么，再生成什么，真正的按需生成，just in time。这个模式的编译时间超级快。

使用

使用起来非常简单，只需要在原来的配置文件添加一个配置项即可。然后就可以开始享受丝滑的编译速度了。

 // 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的人，如果你们在徘徊犹豫，或者嗤之以鼻，就像作者说的，给它一个机会，去用一下。再多的文章，说再多的好处，都不及你真正上手把玩一下。

在2.0+版本的时候，我尝试去翻译它的官方文档，进行到一半的时候，出了2.1版本。。。

翻译到一半的中文文档v2.0.2

如果能帮助到人，我会继续进行下去，并且同步2.1版本。Just let me know!