带有 Tailwind 的 Next.js 刷新缓慢

Posted 2023-03-07

【中文标题】带有 Tailwind 的 Next.js 刷新缓慢

【英文标题】：Next.js with Tailwind Refreshes Slow

【发布时间】：2021-08-08 13:02:28

【问题描述】：

将 Tailwind 添加到我的小型 Next 项目后，我的刷新时间非常缓慢。我最初以为这是我的设备。

【参考方案1】：

我通过从@GeniusHawlah 之类的global.css 文件中删除@tailwind 指令解决了这个问题。

然后Tailwind CLI:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

我将 output.css 导入到我的 global.css。 当我编辑*.jsx 文件时，tailwindcss 更新output.css。

【参考方案2】：

我通过使用Tailwind's just-in-time mode 解决了这个问题。

// tailwind.config.js

module.exports = 
 mode: 'jit',
 ...

此功能目前处于预览阶段，这意味着它可能会发生变化，但它对我有用。

【参考方案3】：

我通过删除解决了它

@tailwind base;
@tailwind components;
@tailwind utilities;

来自我的 global.css 文件。这样做的缺点是您将无法内联应用 tailwind 类，但您仍然可以在您的 css 文件中编写您的 tailwind 并使用@apply。

【讨论】：

我遇到了类似的问题，但是项目处于这样一个阶段，我无法将内联类移动到 CSS。这是大量的重构，并且可能会破坏顺风作为内联类实用程序的某些目的。希望有更好的解决方案。

你能澄清一下“内联应用顺风类”吗？你的意思是类不能直接用在组件中？

是的。您将无法在组件中使用每个 Tailwind 实用程序类。您必须为它们创建（一个）单独的 CSS 文件。