快速了解 Tailwind CSS 的 JIT 模式

线上范例：JIT 线上范例 - Tailwind Play

因为 Tailwind CSS 的设计原理，在开发时会先帮你产生好超多的 class，CSS 档最少 3 MB 起跳，而且预设还只有开 1-2个 Variants。但现实往往没有那麽单纯，开发下去需要的 Variants 只会越来越多，开发中产生的 CSS 档长到 10-20 MB 都是可能的，还会连带拖慢 Chrome 载入的时间。

这时候 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 等都可以用喔！

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

<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">

如果有嵌入 LINE 或 Twitter 的按钮时，LINE/Twitter 的商标颜色也不用增加到颜色系统了，因为只会用这麽一次呀：

<button class="bg-[#00b900]">加入 LINE 好友</button>

或者是更客制的网格设定：

<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。

X 这样是不行的呦：

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

O 动态选择完整的 class：

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

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

X 这样是不行的呦：

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

O 改用 Inline-style

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

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

结语

结论，JIT 模式太香了！速度快不说，还有这麽多新功能，推荐新专案都要启用，真的爽到起飞！！！

线上体验

啊！别忘了来用用看 Tailwind Play，可以在本篇的范例体验看看唷：JIT 线上范例 - Tailwind Play

参考资料

• Just-in-Time Mode - Tailwind CSS