首页 信息互联🚀

因为Tailwind CSS的设计原理,在开发时会先帮你生成一堆的class,CSS文件最少3MB起步🤷‍♂️。随着开发下去需要的Variants只会变得越来越多,开发中产生的CSS文件甚至变成10-20 MB都是可能的,还会连带拖慢载入的时间。

这时候JIT模式就派上用场啦!Tailwind CSS 2.0正式上线的Just-in-Time (简称JIT )编译器,可以在写HTML时及时编译CSS,大幅缩短编译时间,以及缩小产生的文件大小。

Just-in-Time 模式的新功能

废话不说,马上来看它可以做什么:

  • 超快速的编译时间 。 原本Tailwind CLI编译需要3-8秒,在 JIT模式 下仅需 0.8秒
  • 直接使用任意Variants 。 不用再烦恼需不需要开 activefocusdisabled 等。
  • 任意值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-visibledisabledeven 等都可以用喔!

当然,还支援各种叠加的用法,像这样😎:

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

或者是网格设定:

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

❌ 这样是不行的呦:

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

✔ 动态选择完整的class:

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

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

❌ 这样是不行的呦:

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

✔ 改用Inline-style

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

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

结语

结论,JIT 模式太香了! 速度快不说,还有这么多新功能,真的爽到起飞!!!😍




文章评论

    橙梓 访客ChromeWindows
    5天 前   回复

    JIT感觉太方便了,之前开发编译Tailwindcss都要将近10s,而且配置还很麻烦,以后就都用JIT了,甚至比原版功能还多

    wibus 访客ChromeMac
    2021-06-13 19:20   回复

    有了JIT的各种东西,只要用了JIT,性能提升刷刷的!
    就好比没有JIT的QEMU和有JIT的QEMU那样

    若梦 访客ChromeAndroid
    2021-05-31 21:17   回复

    我能不能把作者的文章盗了

目录