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