reactjs - 为 nextjs 项目设置关键 css 和删除不需要的 CSS 的正确方法

Question

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

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

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

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

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

我试过 here 的解决方案添加到头部，但它会按预期添加所有 CSS。我试过this还有一个

Answer 1

你应该试试 PurgeCSS .直接来自文档:

PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files

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

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