因为Tailwind CSS的设计原理，在开发时会先帮你生成一堆的class，CSS文件最少3MB起步🤷‍♂️。随着开发下去需要的Variants只会变得越来越多，开发中产生的CSS文件甚至变成10-20 MB都是可能的，还会连带拖慢载入的时间。

这时候JIT模式就派上用场啦！Tailwind CSS 2.0正式上线的Just-in-Time (简称JIT )编译器，可以在写HTML时及时编译CSS，大幅缩短编译时间，以及缩小产生的文件大小。

Just-in-Time 模式的新功能

废话不说，马上来看它可以做什么：

• 超快速的编译时间 。 原本Tailwind CLI编译需要3-8秒，在 JIT模式 下仅需 0.8秒 。
• 直接使用任意Variants 。 不用再烦恼需不需要开 active 、 focus 或 disabled 等。
• 任意值CSS class 。 可以直接在HTML里写像 top-[247px] 这样的class，将会自动生成。 而且也可以使用Variants： lg:top-[587px] 。
• 在develop和production产生一样的CSS 。 不需要烦恼上线后会不会有class灵异的消失~
• 在开发时有更好的浏览器效能 。 因为develop和production的CSS大小一样小，本地预览时不会出现10-20 MB的CSS，开启相关开发工具也不会载入很久。

启用JIT 模式

要开启非常简单，只需要在 tailwind.config.js 里把 mode 设成 'jit' 就行了：

module.exports = {
  mode: 'jit',
  theme: {
    // ...
  }
  // ...
}

但因为JIT模式在开发时就只会打包需要的class，所以也要配置 purge 的部分：

module.exports = {
  mode: 'jit',
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    // ...
  }
  // ...
}

新功能

然后就可以开始玩功能了！

直接使用任意Variants

<input class="active:bg-indigo-200">

直接在HTML写就可以了，不用在 tailwind.config.js 做设定，方便许多了。 其他的 focus-visible 、 disabled 、 even 等都可以用喔！

当然，还支援各种叠加的用法，像这样😎：

<button class="md:dark:disabled:focus:hover:bg-gray-300">

任意值class

如果网站是照着设计稿刻出来的，这个功能绝对是必备。 使用任意值class很简单，把你想要指定的值用 [...] 框起来，比如 h-[100px] 可以设定高度为 100px 。 但要注意的是不能滥用，否则Tailwind CSS的设计系统就失去了原本的优势了。

首先是万恶的图片，绝对定位+图片宽高，现在终于都可以在HTML 里搞定！ ：

<img class="absolute w-[165px] h-[110px] top-[-125px] left-[62px] md:top-[-30px] md:left-[180px]" src="/background-image.png">

或者是网格设定：

<div class="grid-cols-[1fr,700px,2fr]">
  <!-- ... -->
</div>

!important 修饰符

还有 !important 也可以使用，在特殊状况时会用到：

<div class="!font-bold">!IMPORTANT BOLD TITLE</div>

如果加上Variants时， ! 要跟着样式名字，而不是加在最前面：

<div class="sm:hover:!font-bold">

JIT 模式的限制

当然JIT 模式不是万能的，它也有一些使用上的限制，请往下看...

需要记住一件事情，Tailwind CSS 是静态提取class 的，写class 务必要写完整，不然Tailwind CSS 会无法正确的打包CSS。

❌ 这样是不行的呦：

<div :class="`mt-[${size === 'lg' ? '22px' : '17px' }]`"></div>

✔ 动态选择完整的class：

<div :class="size === 'lg' ? 'mt-[22px]' : 'mt-[17px]'"></div>

但如果真的要写完全动态的class 的话，只能改用Inline-style 或CSS-in-JS 的套件了。

❌ 这样是不行的呦：

<div :class="`bg-[${userThemeColor}]`"></div>

✔ 改用Inline-style

<div :style="`background-color: ${userThemeColor}`"></div>

还有，JIT模式是没有使用PurgeCSS，所以PurgeCSS的设定都不能用，如果出于特殊状况需要用safelist的话，可以增加一个 safelist.txt 达成这个目的。

结语

结论，JIT 模式太香了！ 速度快不说，还有这么多新功能，真的爽到起飞！！！😍