JIT 即时模式

继上一篇提到开启 JIT 模式有许多优点，今天威尔猪就来浅谈这个有点厉害的新即时编译器到底有啥了不起。不过目前这项功能类似抢先试用状态，而且 Tailwind CSS v2.1 以上版本才支援，未来应该还会陆续强化或变动，咱们静观其变吧。

先来看看官网说了哪些优点：

这边写几个威尔猪比较有感的优点：

• 编译时间飞快
  在上一篇有看到编译所需的毫秒数，一般需要 3000-8000 毫秒，如果使用 webpack 等工具则会用更多的时间来编译，而开启 JIT 模式，任何建构工具都可以约在 800 毫秒内完成，不得不说有开启跟没开启速度真的差别太大了。

• 开发模式和产品模式的 CSS 是一样的
  不用担心开发模式有哪些未使用的样式没清除，或是产品模式意外删除了样式，而且开发中的文件大小也不会异常肥大，开发时效能并不会和正式上线区别很大。

• 可随心所欲使用任何状态变化模式 (variant)
  以前版本因为档案大小的考量，并非所有的状态变化模式都预设在功能中，要使用 active、disabled、hover、focus 等状态变化模式，就必须到 tailwind.config.js 里进行配置，现在只要开启 JIT 模式，随便用啦，都不用再次配置。

  原则上官方建议让 tailwind.config.js 保持的越小越好，并且仅写入想客制化的部分就好。但如果有同学想看 Tailwind 完整的预设设定档，可以在终端机输入指令：npx tailwindcss init --full (记得先备份好，不然可能会把你的设定档覆盖掉)。

  我们可以这样写状态变化模式：

  <button class="disabled:opacity-50">我是按钮</button>
  

  也可以这样堆叠状态变化模式：

  <button class="md:disabled:focus:hover:opacity-50">我是按钮</button>
  

• 无需自定义 CSS 即可生成任意样式
  这也是威尔猪很爱的功能之一，完全直觉，有时设计稿会出现奇怪的 px 数值 (撇除设计师或软件手误)，是无法用定义的倍数设定来代替，就必须在 CSS 另外写入，例如：margin: 23px;，现在只要在 HTML 的标签使用 [任意数值] 设定 class 名称就可以了，例如： m-[23px]，是不是很神奇。

  这功能虽然方便，但不要乱用，除了会让原始码看起来很恶心之外，还会让 CSS 档案变大，尽量还是使用 Utilities 的方式来撰写，不然就失去 Tailwind 原本的用意了。

  我们可以这样设定图片大小：

  <img class="w-[598px] h-[742px]" src="...">
  

  也可以设定位置：

  <img class="absolute top-[-38px] left-[47px]" src="...">
  

  甚至连颜色也可以设定：

  <p class="text-[#FED439]">Hello Tailwind<p>
  

  目前 [任意数值] 也是有写法限制

  ❌ 不能使用 JS ES6 模版字符串连接：

  <div className={`mt-[${size === 'lg' ? '45px' : '20px' }]`}></div>
  

  ❌ 不能使用 Vue 之类动态值计算：

  <div class="bg-[{{ myColor }}]"></div>
  

  ❌ 不能在中间使用空白：

  <div class="h-[calc(1000px - 5rem)]">...</div>
  

最後，启用 JIT 模式非常简单，就只要在 tailwind.config.js 文件中设定 mode: 'jit' 就好了，不过记得一定要搭配 perge 中的路径做编译使用，不然写的 Tailwind 没有编译出来，就完全无效了。好了～咱们明天见。