Nextjs 热重载每次更改顺风 css 需要 8-10 秒

Question

我正在学习 Nextjs 并尝试第一次使用 tailwind css。我注意到我对带有 @apply 指令的类选择器上的 index.css 文件所做的每一次更改都需要 8-10 秒才能编译并显示在浏览器上。

重现步骤 ：

1. 运行命令

npx create-next-app --example with-tailwind-css test-app

2. 在 pages/index.js 中创建一个按钮并将其命名为 btn-blue。

3. 使用以下命令运行服务器

npm 运行开发

4. 为 btn-blue 选择器更改 style/index.css 文件中的任何属性（例如：将 bg-blue-400 更改为 bg-red-400 左右，任何触发重新编译的内容）。并观察在浏览器上反映本地主机上的更改所需的时间。

我在实验后的一些观察：

1. 这种缓慢仅在对@apply 样式进行更改时才会出现。如果我把 index.css 中所有的顺风代码都注释掉，写出自己的纯 css 样式并更改，热重载是瞬间的

2. 即使将任何顺风类更改/添加到 index.js 文件中元素的类名（内联样式），热重载也是即时的。

所以这个问题似乎只有在使用来自外部 css 文件的 tailwind css 时才会出现。

我希望你能检查并帮助我。谢谢 ！

Answer 1

更新：随着 Tailwind v2.1 的最新更新，引入了一个新的 Just-in-Time 引擎，可以动态生成 css，使您的最终 css 包大小非常小且高效。

这解决了 NextJS 上渲染缓慢的问题，并且渲染是即时的。

运行以下命令，尝试使用启用 JIT 的最新 Tailwindcss 设置 NextJS 样板项目。

npx create-next-app --example with-tailwindcss with-tailwindcss-app

要自己启用 JIT，请将 tailwindcss 库更新为最新版本，然后在代码行tailwind.config.js之后的文件module.exports = {中添加以下属性作为应遵循的内容 -

 mode: 'jit',

请查看以下博客文章中的公告视频，其中显示了所有令人兴奋且不容错过的新功能和更新 -

https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css

我发现这是 NextJs Github 存储库中的一个未解决的问题 (#13488)。在问题讨论线程中获得了以下解决方法，它就像一个魅力（在不到一秒钟内反映的变化）。

创建两个css文件：

1. 随着顺风进口（@tailwind base,utilities and components）（Ex tailwind.css）
2. 带有@apply 规则和其他所有内容的自定义 css 文件。（例如 index.css）

将 tailwind.css 和 index.css 导入 pages/_app.js 文件以全局应用样式。

现在，您在 index.css 中对 @apply 所做的任何更改都将立即反映在 localhost 实时服务器中。

我已经知道在 Gatsby 中使用 Tailwind 也存在同样的问题，因此在这种情况下它也可能有所帮助。

希望您觉得这个有帮助。谢谢