Day 16：「宝藏，都藏在那里了！」- Tailwind JIT 模式

JIT、JIT 的叫了这麽多天，终於就是今天了！
今天就是要来讲解 JIT 模式哦～～

JIT 模式真的快非常非常多，
快到你觉得你前面几天根本在浪费人生 XD

不过就是要这样子先苦後甘才会特别珍惜啊 (X

火箭已经准备发射，前往满是宝藏的星球。
按钮按下去，我们出发！
 

火箭实验场

今天要用到的专案在这里：点我前往太空总署

好啦，其实今天的专案，和昨天完成後的结果差不多 XD
也可以直接使用昨天的专案来做就好。

昨天说应该不会用到，就是 应该 嘛哈哈哈
 

JIT

「JIT ... JIT 一直 JIT 的叫！」
「说到底 JIT 到底是什麽啦兔兔！！」

喔喔，我没说过吗？
JIT，就是 Just In Time 的缩写哦！

而这就要讲到一个软件开发中的一个专有名词，即时编译 (Just-In-Time Compilation)。

即时编译就是不断的实时分析正在执行的程序码内容，并认定程序中的某些内容，这样内容更新时就只需要部份编译，而不是从头全部再编译一遍，这样可以使编译速度超级大幅度的提升。

然後像是 Android Runtime (ART)、JAVA的虚拟机 (JVM) 和 Chrome 及 NodeJS 的 V8 都是使用 JIT Compiler 进行编译。

和这个概念相同，Tailwind 的即时模式也是透过实时的监控 purge 中所指定范围内的档案并进行编译，且只编译出一些如 Preflight 的基本共用样式，以及你有用到的 class。

这麽一来就不需要像之前一样全部都编译过後再进行 Tree-Shake 而花了很久的时间。

正因为是随时监控着你的原始码内容，所以当你一有增加新的 class 或功能，一经比对马上就可以发现，然後帮你多编译出这些功能再加上去，而不是从头来一遍了！

所以开启 JIT 的 Tailwind 如获神力一般，不但速度大大大大大提升，还支援了那些原本需要在配置档中加上後才开启的样式功能，现在完全不需设定就可以直接使用。

好了，维基百科介绍完了，
现在来实地感受一下吧！
 

设定开启 JIT 模式

「兔兔！既然 JIT 这麽神，会不会设定很繁琐啊？」

完全不会！ 我们只需要像这样在 purge 上面多增加一行 mode: "jit"，顺便把 purge 设定修改如下：

module.exports = {
  mode: "jit",
  purge: [
    "./*.{html,js}",
    "./**/*.{html,js}",
  ],
  ...
}

这样就开完了！

没错，不要怀疑～就是这麽轻松如意。

但是有一点必须要注意，我们之前有说过很多次，刚刚前面也有再提到，JIT 要监控 purge 设定范围的内容，所以 有开启 JIT 一定要 purge！ 不然它只会把 Preflight 类的样式编译，到时候画面上会完全没有样式哦！

加完之後我们就来编译一次：

npm run build

这个速度简直是之前的 10 倍对吧！

兔兔的电脑跑很慢，所以我想你们的应该比我跑更快～
然後那些警告不需要去管它哦！ 都是一定会跳的。

接着我们来试着改一些样式吧！
(你又要改！)
 

样式调整

我们一样，调整颜色就好... 把方块 3 改成紫色！

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group">
  <box class="box bg-red-500 hover:bg-red-400 ring-red-300" tabindex="0">
    1
  </box>
  <box class="box bg-blue-500 hover:bg-blue-400 ring-blue-300" tabindex="1">
    2
  </box>

  <box class="box bg-purple-500 hover:bg-purple-400 ring-purple-300" tabindex="2">
    3
  </box>
</div>

「齁 ... 兔兔！」 (怒)
「又来了咩！ 改了又没样式了欸！ 难道我又要去写那些难懂的正规表达式了吗？ 快是快很多啦 ... 但这真的很不人性化！ 而ㄑ...」

欸欸欸好啦好啦～别再抱怨啦～
其实这正是我要你改样式的目的呀！

因为我前面都有说哦～～～～～！
JIT 模式需要随时监控 purge 设定的监听范围中的文件。

你真的以为多加了一行就能监控了吗 XD
没关系，让我来讲给你听。
 

监控服务器 (Watch Server)

要开启 watch server 也不难哦！ 超简单！

现在只要在 package.json 中的 script 区块把 build 指令的名称改为 watch，并在指令最後面加上 -w 这个参数：

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "tailwindcss -i tailwind.css -o style.css -w"
    // ↑↑ 这行最後面加上 `-w` ↑↑
  },
  ...
}

会把指令名称从 build 改为 watch 是出於命名习惯。因为现在指令的用途已经改为 watch server，而非 build。

 
接着事不宜迟，立马来执行吧：

npm run watch

对吧，改完立刻变成紫色了！

千万别急着把 watch server 关掉，
让我们马上再改成其他颜色吧！
 

再次调整样式

接下来这次改颜色，我顺便来讲一个 JIT 模式限定的新语法。

前面说过，有了 JIT 之後，有许多样式不需进入配置档开启就可以直接使用，但这个跟那些不一样，它是支援你使用任意值的语法！

• bg-[任意值]

这个语法可以直接填入既有的颜色名称或是色码，举例我们把方块 3 改为橘色系：

• 用 bg-[darkorange] 来取代 bg-purple-500
• 用 hover:bg-[orange] 取代 hover:bg-purple-400
• 用 ring-[#ffc966] 来取代 ring-purple-300

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group">
  <box class="box bg-red-500 hover:bg-red-400 ring-red-300" tabindex="0">
    1
  </box>
  <box class="box bg-blue-500 hover:bg-blue-400 ring-blue-300" tabindex="1">
    2
  </box>

  <box class="box bg-[darkorange] hover:bg-[orange] ring-[#ffc966]" tabindex="2">
    3
  </box>
</div>

直接储存後会发现 terminal 显示它有重新编译：

再来就是马上看结果：

橘色系挑战，大成功！
而且速度飞快的呢，修改样式重新编译只需要花 0.5秒！

那 watch server 打开後就暂时不要关了，
因为在开发过程中会需要随时调整样式，
当你开发完毕的瞬间，其实 css 也编译完了。

而且不只这样，因为 jit 必须要设定 purge，
所以这 css 不但已经是编译完的，还是已经减肥过的！
是不是很棒呀～

然後还有一点就是开启了 JIT 之後，Tailwind IntelliSense 也不会再像之前一样只会提示基本样式，而是全部所有 Tailwind 中有的样式都会提供给你！ 因为这些样式有了 JIT 都不需要设定也能直接使用。

像这张图中所提示的 peer 变化模式，就是 Tailwind 2.2 推出之後一个很强大的新功能，可以让你的 css 设计更加灵活、可互动性更高。

接下来我就大略的介绍一下 JIT 限定的功能吧～
 

限定功能

Tailwind 2.1

JIT 模式是 2.1 时推出的新功能，除了改善编译速度上的问题外，也因为即时编译所以可以把原本不可能组合在一起的功能直接全部串在一起，而且还能够顺利运作。

举例， sm:hover:active:disabled:opacity-75 ...
说实在我都不知道该如何解读它了，不过我们就来解读一下吧！

  sm: {
    hover: {
      active: {
        disabled:opacity-75
      }
    }
  }

简单来说这个功能就是：「在小尺寸萤幕宽度以上时，当你滑鼠悬停且按下，这个元素若是在停用状态，不透明度就会变为 75%」

用想得都觉得累 ...
但这就是随便你写，它就想办法帮你做到！

或者像是宽度、高度、色彩、程度等等都可以直接指定任意值，比如：

• bg-[#FF00CC]
• bg-opacity-[77%]
• min-h-[50px]
• w-[27.7rem]
• duration-[33ms]
• border-[7px]
• space-y-[11px]
• rounded-[29px]

大概就举例这些，剩下自己以此类推嘿！

以 border[11px] 为例，其实它的原理就是动态编译样式成：

.border-\[11px\] {
  border-width: 11px;
}

Tailwind 2.2

到了 2.2，又增加了更多更方便的语法！

像是我们原本设定背景色彩的同时，若要设定背景不透明度，
我们必须这样写：

<box class="bg-red-500 bg-opacity-75">
  Tailwind 2.2
</box>

但为了让这很常同时出现的功能可以使用的更快速，
现在可以这样写：

<box class="bg-red-500／75">
  Tailwind 2.2
</box>

所有的预设色彩都支援短语法的功能，但是任意值不行。也就是说你无法写成 bg-[red]/75。

2.2 还有一些新的变化模式，像是开始支援伪元素的功能：

• before: (::before)
• after: (::after)
• first-letter: (::first-letter)
• first-line: (::first-line)
• marker: (::marker)
• selection: (::selection)

或者是表单设计上常用的，可以设定表单元件状态样式的变化模式：

• required:
• invalid:
• placeholder-shown:

甚至还可以设定打字时插入符号的颜色(就是会闪烁的那个游标)，但最赞的果然还是这个功能：相邻元素选择器的变化模式 - peer。

Peer

简单来讲解一下 peer 的用法。

我们可以简单做到 hover A 方块，然後 B 方块会改颜色：

<box class="peer">
  A
</box>

<box class="peer-hover:bg-blue-300">
  B
</box>

A hover B 范例连结

所以也可以用这个做 Toggle Switch：

<label class="relative block w-20 h-10 m-5">
  <input type="checkbox" class="peer checked:bg-green-300 ..." />
  <div class="peer-checked:translate-x-full ..."></div>
</label>

Toggle Switch 范例连结

效果就是上面这样。

主要就是藉由 checkbox 上有 peer，那麽跟它相邻的 div 就可透过 peer 获取 checkbox 的状态，如果 checkbox 被打勾，变化模式 peer-checked: 就会生效，使白色圆形的 div 往右水平移动 100%。

这是一个非常简单又有趣的小应用，关於 peer 变化模式应用的影片我会将连结放在下方，有兴趣的人可以自己去看看哦！
 

小补充

这个也是 JIT 的限定功能。 (笑)

如果你想要像 bootstrap 一样，
可以强调很重要很重要的部分的话，
也是可以轻松办到的哦！

Tailwind JIT 模式内建 !important 的写法！

就是在 class 前面加上 ! 惊叹号：

<div class="bg-red-200 bg-green-200">
  不重要！
</div>

<div class="bg-red-200 !bg-green-200">
  很重要！
</div>

来看一下效果，确实有覆盖掉！
这样你也能跟着 bootstrap 一起很重要罗～～
 

还有想玩 JIT 模式的人如果嫌安装和设定很麻烦，可以直接去 Playground 上面玩，因为 Playground 预设就是开启 JIT 模式哦！

呼～然後 ...

这样 JIT 模式的介绍就全部结束啦！！！
同时也是这个系列 Tailwind 篇的最後一篇哦～

接下来，我们会踏入全新的领域！
我们要来讲前端框架：Vue

因为最後那些元件就要用 Vue + Tailwind 来完成
不过写 React 的人也别气馁 ...

因为 Tailwind 切的版基本上是可以直接挪过去用哦！
其实元件的操作逻辑也类似，可以参考参考～

那今天就到这里了～
然後其实我放影片上来是很害羞的 ...
大家看看就好，别太挑剔嘿 ><

明天同一时间请继续收看，乌龙派...
明天记得也要来看文章哦～
 

给你们的回家作业：

• 作业实施要点：
  • 把玩 JIT，做一个 Toggle Switch 吧！
• 火箭发射场：
  • 准备启航：会不会飞不上去啊？
  • 已上太空：哇！已经绕到木星又回来了！？
• Peer 变化模式的应用：影片连结
   

关於兔兔们：

• Tailwind CSS 台湾官网
• Tailwind CSS 台湾 (脸书粉丝专页)
• 兔兔教 × Tailwind CSS Taiwan (脸书社群)
• 兔兔教大本营

( # 免免小声说 )

文字真的是一个奥妙的东西，
因为差一笔一划如同差距千里。

之前大家在玩互换名字的时候，
有个人一直被误认成我。

「大家好，我是免免」

乾 ... 可以，你真行！