TailwindCSS - 初探 Just in Time 模式 v2.2

关於 JIT 模式

JIT(Just in Time Mode) 是在 TailwindCSS v2.1 以後才出现的功能，未来此框架开发也会围绕在这个功能上，如果有试玩的朋友就会发现这个功能真是相当酷炫，所以如果专案没有特别要求要支援 IE 的话，建议都直接更新到最新版本，因为有用跟没有差非常多，v2.1 以前的版本是没有支援 JIT 模式，所以开发时这一点非常需要注意！

为什麽要使用 JIT 模式

练习至今有发现如果我修改很多 template 的东西，就会需要重新编译专案，如果专案一大，编译的时间就会很久，而在开发专案的过程必定会不断地修改切版的内容，如果每次修改後都会因为编译时间长而降低开发的效率，导致产出量能不佳，这样原本这麽好用的切版框架，反而就变成不好用了。

使用 JIT 模式起手式

打开 tailwind.config.js 档案，然後加上 mode:'jit'，这样就可以了。

module.exports = {
    purge: {
        enabled: true,
        content: ["./**/*.html"],
    },
    mode:'jit', //加在这里
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {
            ringWidth: ["active"], 
        },
    },
    plugins: [],
};

直接看编译速度

最有感觉就是在编译的时候，这是没有用 JIT 的编译时间，共花了 2.6 秒左右。

这是使用 JIT 之後，瞬间不到 1 秒就编译完了！哇喔！

默认加入所有的状态

使用 JIT 的好处其二，之前有看到有些样式的状态需要另外透过扩充的方式增加，但这样变成再开发的时候，还要去确认哪一个有加上状态，哪一个没有加上状态，以之前的练习为例，我在 variants 中扩充了一个 ringWidth 有 active 的状态，但使用 JIT 模式後，这一段就不用加了，因为在此模式会默认所有状态都加上去。

tailwind.config.js

module.exports = {
    mode: "jit", //加在这里
    purge: ["./**/*.html", "./src/**/*.css"],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {
          
        },
    },
    plugins: [],
};

虽然我已经把扩充的 ringWidth 删除了，但我在 click 的时候依然会有 active 效果。

客制化样式超省力

之前如果要客制化样式，要回到配置档的 theme 的内容去做客制，但如果在开发中会不断需要增减样式，其实是一件非常麻烦的事情，而且客制的内容只能使用 TailwindCSS 设定好的数值，如果要特别客制，可能就要写成元件的方式，一两页可能还好，但当专案页数一多，相依性也多的时候，就会非常的麻烦，但 JIT 帮我们解决这样的问题。

以下方为例：

做一个宽高都相同为 w-20 的方形，

   <div class="container mx-auto mt-3">
            <div class="w-20 h-20 bg-blue-500 mt-4"></div>
        </div>

如果使用 JIT 模式，我可以直接透过 w-[...] 的方式修改，就不用透过扩充的方式更改样式罗！

   <div class="container mx-auto mt-3">
            <div class="w-[20px] h-20 bg-blue-500"></div>
        </div>

打开开发人员工具也可以看到样式的确被修改了。

当然颜色也可以这样处理，方式也与刚刚修改宽度的方式相同，只要给予一个色票号码即可。

  <div class="w-[20px] h-20 bg-[#f0f]"></div>

透过以上两个简单的练习，已经可以体验到除了大幅降低编译时间外，更重要的是可以客制化的弹性更大，当然还有很多内容可以参考官方文件。

参考资料

• Just-in-Time ModeTailwind CSS version