Unexpected loading time for Tailwind css with Next.js in Server-side rendering

Question

For the website I'm creating I use next.js and for styling tailwind, but can't really see the benefit of server-side rendering that is expected from next.js, because the styles and images have a loading time when you open up the website, (assumingly related to tailwind) and with a slower connection it takes quite a few seconds to get to see the contents of the page.

How could I solve this loading issue and still stick to tailwind?

This is the website link, if you try it, you'll see the few seconds loading time before the content is visible: https://www.revolin.io/

Answer 1

If this problem was local you could use the JIT mode for Tailwind however this also has slow times in production which can be caused by many problems. If you wanted to not ssr tailwind you could import it dynamically and disable ssr. But this most likely is not what is causing the slow speed times. You could follow the steps here Tailwind Optimization for Production to see if this will improve your speeds.