JITモードとは？
Just In Time（ジャストインタイム）の略で以下のようなメリットがあります。
- ブラウザのパフォーマンスが向上する
- variant（擬似クラス）を組み合わせて使える
- 任意の値でクラスを使いやすい
JITモードを有効にする
tailwind.config.jsにmode: 'jit'を追記するだけで有効にできます。
module.exports = {
mode: 'jit',
purge: [
// ...
],
theme: {
// ...
}
// ...
}
TailwindCSSのversion3系は、JITモードがデフォルトで有効になっています。
version2系を使っている人は上記のモード指定が必要です。
ブラウザのパフォーマンスが向上する
デフォルトでは10万行くらいあるファイルを読み込んでいるため、ブラウザからするとこの膨大なファイルを読み込むのはかなり重い作業でした。
JITモードでは使っていない不要なスタイルを削除してくれるのでファイルサイズが最小限になり軽くすることを実現してくれるみたいです。
variant（擬似クラス）を組み合わせて使える
variantとは、:hover、:focus、:activeみたいなやつです。
今までは、hover:bg-red-500のように単体でしか使うことが出来ませんでした。
しかしJITモードでは、これを組み合わせて使うことが出来ます。
<div class="text-blue-500 md:hover:bg-red-500">おはようございます</div>
この場合は、画面幅がmd以上（768px）かつ要素がhoverされた時にbgがredになるということです。
このようにvariantを組み合わせることによって柔軟にCSSを適用することが出来ます。
任意の値でクラスを使いやすい
従来のtailwindcssでは、事前に定義されたクラスしか使用できませんでした。
mt-113pxなどの用意されていない任意の値を使う場合は、tailwind.config.jsに追記して設定する手間があり、若干めんどくさいです。
しかしJITモードでは、わざわざ設定ファイルに必要なクラスを追加する必要は無く、角括弧を使ってその場で定義することが出来るので、柔軟性が上がります。
<div class="w-[111px] mt-[113px] mb-4"></div>
おわりに
最近、TailwindCSSのversion3系を使っていて、JITモードが自動的に適用されていることに気づきました。アップデートにより標準でJITモードが有効になっているみたいです。
まだ、TailwindCSSのversion2系を使っている人は、version3系にアップデートするかJITモードを有効にして使ってみてはいかがでしょうか :D