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

Question

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

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

我尝试关注一些博客以达到相同目的，但没有成功。

很明显，我删除了我尝试过的内容，因为它不起作用。现在，将最少的代码保留在存储库中。

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

我尝试将here中的解决方案添加到头部，但是它按预期添加了所有CSS。 我也尝试过this

Answer 1

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

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

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

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