为 NextJS 项目设置关键 CSS 并删除不需要的 CSS 的正确方法

Question

我有一个NextJS项目设置-> https://github.com/stefanre1/nextjs-setup

我想知道从 Tailwindcss 中删除不需要的 css 并将关键 css 添加到每个页面的正确方法是什么。

我尝试关注一些博客来实现相同的目的，但没有成功。

显然，我已经删除了我尝试过的内容，因为它不起作用。目前，在存储库中保留了最少的代码。

任何帮助或建议都会有所帮助。

我已经尝试从这里添加解决方案以添加到头部，但它按预期添加了所有 CSS。 我也试过这个

Answer 1

你应该尝试 PurgeCSS。直接来自文档：

PurgeCSS 会分析您的内容和 CSS 文件。然后，它将文件中使用的选择器与内容文件中的选择器进行匹配。它从 css 中删除未使用的选择器，从而生成更小的 css 文件

Tailwind 文档实际上在这里有一整节关于这个问题，详细介绍了如何设置 PurgeCSS 和其他方法来减小文件大小。PurifyCSS也是另一种选择。

编辑：我刚刚意识到您已经尝试了PurgeCSS，也许您在配置中犯了错误，应该直接从文档中尝试设置。

Answer 2

我看过你的代码。

• 删除 @zeit/next-css 和 next-purgecss 包，因为 Nextjs 提供了对 css 的内置支持。
• postcss.config.js文件将处理所有事情。
• 如果你想把任何CSS放在purgeCSS的安全列表中，你可以通过在postcss配置文件中添加安全列表数组来做到这一点。
• 有时我们想从purgeCSS中忽略css文件的某些部分。为此，请添加

/*! purgecss start ignore */

...your css properties
/*! purgecss end ignore */

您可以按照本教程来设置您的 postcss 配置

清除忽略讨论

告诉我它是否有效，或者您有一些疑问。