I’ve made an implementation of Tailwind CSS for Hugo Pipes, using PostCSS, along with a PostCSS plugin called PurgeCSS.
PurgeCSS removes everything from your CSS file that’s not referenced in your templates.
Tailwind is a utility-class CSS library that essentially allows you to just write small, single-purpose classes in your templates, and not necessarily write any CSS.
Note here I’m referring to the Hugo PostCSS implementation, not SASS/SCSS.
Hugo Pipes appears to regenerate CSS files when the assets directory changes. This seems correct to me, yet,—because my CSS file only contains classes that are in my templates—if I add a new class, I need my CSS file to update when I change a file in my layouts directory.
Is it possible to initiate an update on a change in layouts/themes? Perhaps it would be a PostCSS-CLI option, where the --watch flag does the work here?
I was wondering about if it could be possible to implement Tailwind! Before Hugo Pipes was released, I build a test project using Laravel Mix with PurgeCSS and it works, but Hugo Pipes would mean a lot less dependencies I’m guessing.
So if you store your variables in the file that starts the pipe (or one with the same file suffix) it should work.
My issue is that I’m not updating any file in the pipe, I’m updating templates. But I’ll look closely at what you’ve posted here already. I have a minimal test case set up and may post that If I think it would be helpful.
That’s right. It’s specific to the postCSS config file, but also to the fact that those of us using utility class CSS (i.e. Tailwind) need to rebuild CSS when our HTML templates are updated to activate PurgeCSS. So it’s a niche within a niche problem My solution is not perfect, but it works so far.