如何使用 Tailwind CSS 优化页面加载速度？

问题：在页面的加载过程中使用tailwind的标签在页面加载过程中，没有样式先一闪而过，进而出现准确的样式页面。

使用 JIT 模式

在 Tailwind CSS 2.1 中添加了一个新功能，称为 JIT（即时编译）。该模式仅在运行时生成实际使用的 CSS 类名，避免了在 CSS 文件中生成未使用的类名。当使用 JIT 模式时，我们可以在配置文件中指定我们使用的所有类名，以便生成仅包含这些类名的 CSS 文件。这样可以大大减少 CSS 文件的大小，提高页面加载速度。

tailwind.config.js：

module.exports = {
  mode: 'jit', // 加入这一行代码
  purge: [
    './index.html',
    './src/**/*.{vue,jsx,js,ts,tsx}',
  ],
}