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

Question

I have a NextJS project setup -> https://github.com/stefanre1/nextjs-setup

I am wondering what's the right way to remove unwanted css from Tailwindcss and add critical css to each page.

I have tried following some blogs to achieve the same but was not successful.

Obviously I have deleted what I have tried as it was not working. For now kept the bare minimum code in the repository.

Any help or suggestions would be helpful.

I have tried solution from here to add to head, but it adds all CSS as expected. I have tried this one as well

Answer 1

You should try PurgeCSS . Coming directly from the docs:

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

The Tailwind docs actually have a whole section on this issue here , detailing how to setup PurgeCSS and other methods to reduce file size. PurifyCSS is another alternative as well.

Edit: I just realized you tried PurgeCSS already, perhaps you made a mistake in your configuration, and should try the setup directly from the docs.

Answer 2

I have seen your code.

• Remove @zeit/next-css and next-purgecss packages because Nextjs provides built-in support for css.
• postcss.config.js file will take care of everything.
• If you want to put any CSS in safelist of purgeCSS, you can do that by adding in safelist array in postcss config file.
• Sometimes we want to ignore certain parts of a css file from purgeCSS. In order to do so, add

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

You can follow this tutorial to setup your postcss config

purgecss ignore discussion

Tell me if it works or you have some doubt.