I have a NextJS project. I am using TailwindCSS. I have setup post CSS as following (postcss.config.js):

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

The problem is that the css file being downloaded on any page hit of website is around ~56KB. It downloads all the css that is being used across any website page. It’s legit CSS, no unused stuff so I don’t think that purging will help here. Is there any way I can load only those tailwind classes that are being used in an HTML page and download the rest later as I navigate through my website? Perhaps something through webpack?

I tried using cssnano but external library styles were being deleted from my styles file.