reactjs - 为 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，也许您在配置中犯了错误，应该直接从文档中尝试设置。