Nextjs每次顺风css的变化都需要8-10秒的热重装。

Question

我正在学习Nextjs，并且第一次尝试使用顺风css。我注意到，我对类选择器上的index.css文件所做的每一次修改都需要8-10秒才能在浏览器上编译和显示。

复制步骤：

1. 运行命令

npx创建-下一步-应用-示例-顺风-css测试-app

1. 在pages/index.js中创建一个按钮，并给它类名btn-blue.

1. 使用下面的命令

运行服务器

npm运行开发

1. 为btn-蓝色选择器更改样式/index.css文件中的任何属性(Ex:将bg-blue-400更改为bg-red-400左右，任何触发重新编译的内容)。并观察在browser.

上反映本地主机上的变化所需的时间。

我在实验后的一些观察结果：

1. 只有在对@apply样式进行更改时才会出现这种缓慢状态。如果我注释index.css中的所有顺风代码，并编写自己的纯css样式并对其进行更改，则热重加载是index.css。

1. 即使在更改/添加任何顺风类到index.js文件中元素的类名(内联样式)时，热重新加载也是即时的。

因此，问题似乎只有在从外部css文件使用顺风css时才会出现。

希望你能帮我查一下这件事。谢谢！

Answer 1

更新:最新更新的Tailwinv2.1，一个新的即时引擎被引入，它可以动态生成css，使您最终的css包的大小非常小，效率也非常高。

这解决了NextJS上呈现速度慢的问题，并且呈现是瞬时的。

运行以下命令，在启用JIT的情况下，尝试使用最新的Tailwindcss安装NextJS样板项目。

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

若要自己启用JIT，请在tailwind.config.js代码行之后将module.exports = {库更新为最新的，然后在您的module.exports = {文件中添加以下属性，如下所示-

 mode: 'jit',

请查看以下博客文章中的公告视频，其中显示了所有新功能和更新，这些功能和更新确实令人印象深刻，不容错过。

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

我发现这是中的一个未决问题(#13488)。在问题讨论线程中找到了下面的解决方法，它就像一种魅力(变化在不到一秒钟内就能反映出来)。

创建两个css文件：

带有顺风导入(@基础、实用程序和组件)的

1. (带有@apply规则和其他所有内容的E.x
2. 自定义css文件)。(E.x index.css)

将tailwind.css和index.css导入到页面/_app.js文件中，以便全局应用样式。

现在，您在index.css中对@apply所做的任何更改都将立即反映在本地主机活动服务器中。

我已经知道，与盖茨比使用顺风同样的问题也存在，因此在这种情况下也可能有所帮助。

希望你觉得这个有用。谢谢

Answer 2

也有类似的问题。唯一能帮我解决问题的是：

• upgrade nextjs到latest
• delete、package.lock或yarn.lock文件，具体取决于您的包管理器、您的整个node_modules/、folder
• reinstall、整个项目(npm install或yarn install)
• now重新运行项目)。构建现在应该是几乎即时的。