Feature request: Critical CSS generation for Tailwind CSS?

feature
1

Hello, dear developers.

As I know, Hugo doesn’t support Critical CSS generation during build time. But Hugo now has built-in support for Tailwind CSS.

If you are writing your CSS manually, it’s not hard to insert critical CSS manually into the <head> section of the site. But when you are using Tailwind CSS, I think it’s necessary to have built-in support on the framework level to generate Critical CSS.

Would be great, if Hugo automatically detect like the first 300 or 500 lines of the CSS code (or whatever amount you provide in the config file), and place this code within the <head> section of the site instead of building the whole CSS into one file.

What do you think about that feature? Is it possible to implement it technically? Or is there any workaround to generate critical CSS for Tailwind by yourself?

2

Check out this tool

3

Yes, I saw those tools, but you need to set up a bundler first, like gulp/webpack, which means extra complexity I’m trying to avoid.

Would be much better if Hugo had built-in support for Critical CSS generation.

4

It seems to me that if you’re using Tailwind and Hugo, not overusing JavaScript snippets and not loading oversized assets like videos or huge images, then your site will already be faster than 99% of websites on the internet. Why try to speed up something that’s already fast — or am I missing something? Don’t let perfect be the enemy of good.

5

While the above would be possible, I don’t think it’s possible to pick a threshold that would cover the critical section of your page – the critical styles may well be last in the CSS file. Also, CSS specified later has more specificity than css specified before, so that will also break that concept (especially considering how Tailwind loads their components).

I have searched a little on this topic now, and I don’t think anyone is doing “critical CSS generation” with Tailwind.