`vue-cli`+`vue2` 踩坑`Tailwindcss`的`JIT`模式

最近尝试在项目中使用大名鼎鼎的tailwindcss，没想到发生了很多意料之外的情况：

安装版本问题，目前使用"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"解决。
JIT（Just-in-Time Mode）问题，在开启 JIT 模式后，Tailwind 不预生成所有的工具类，而是根据开发者的实际使用，来生成对应的类，大大提升了编译速度。。

这次主要说一下在使用JIT时遇到的问题，首先根据网上的说法，在tailwind.config.js（没有自己新建）文件中新增配置

  // tailwind.config.js
  module.exports = {
+   mode: 'jit',
    purge: [
      // ...
    ],
    theme: {
      // ...
    }
    // ...
  }

由于 JIT 模式通过扫描模板文件按需生成 CSS，因此在tailwind.config.js文件中配置所有模板路径的purge选项至关重要，否则您的 CSS 将为空：

  // tailwind.config.js
  module.exports = {
    mode: 'jit',
+   // These paths are just examples, customize them to match your project structure
+   purge: [
+     './public/**/*.html',
+     './src/**/*.{js,jsx,ts,tsx,vue}',
+   ],
    theme: {
      // ...
    }
    // ...
  }

在完成上述配置后，运行项目，发现问题。

在使用任意值后，例如bg-[#000] m-[20px]等，项目无法实时更新，查看控制台发现相应样式并没有生成。

动态生成样式失败

解决方案：

(Just-in-Time Mode - Tailwind CSS)

根据网上说法设置 TAILWIND_MODE=watch
```
 "dev": "cross-env NODE_OPTIONS=--max-old-space-size=10240 TAILWIND_MODE=watch vue-cli-service serve"
```
成果
1. 实时编译：将 Tailwind CSS 的源代码实时编译为最终的 CSS 文件。在开发过程中，当你编辑和保存 Tailwind CSS 的源文件时，会自动触发编译过程，使你能够立即看到样式的变化。
2. 快速反馈：通过实时编译，你可以快速获得对修改的即时反馈。无需手动运行构建命令或刷新页面，即可看到更新后的样式。
问题:
1. 由于监听机制的冲突，TAILWIND_MODE=watch 会启动一个进程来监听 Tailwind CSS 的源文件变化，并将其实时编译为最终的 CSS 文件。当文件发生更改时，该进程会触发一次编译。这也会导致文件更改事件被触发，进而触发一次热更新。保存文件后的热更新会执行两次，影响开发效率。
2. 实时编译的内存无法释放，容易造成nodejs内存溢出。
设置 TAILWIND_MODE=jit。
1. watch：启用实时编译模式。在开发过程中，当你编辑和保存 Tailwind CSS 的源文件时，会自动触发编译过程，使你能够立即看到样式的变化。
2. build：启用构建模式。在构建过程中，Tailwind CSS 会将源文件编译为最终的 CSS 文件，以供生产环境使用。这是默认的工作模式。
3. jit：启用 Just-in-Time (JIT) 模式。JIT 模式是 Tailwind CSS 2.1 版本中引入的一项功能，通过实时解析 CSS 类名并即时生成样式来减小生成的 CSS 文件大小并提高构建速度。

踩坑Tailwindcss的JIT模式

vue-cli+vue2 踩坑Tailwindcss的JIT模式

解决方案：

成果

问题:

`vue-cli`+`vue2` 踩坑`Tailwindcss`的`JIT`模式