budparr/hugopipes-tailwindcss

Hugo's Pipes functionality using TailwindCSS and PurgeCSS

The Repo is a working example of Hugo's Pipes functionality using TailwindCSS and PurgeCSS.

• Hugo Pipes

• TailwindCSS (with a custom extractor for PurgeCSS)

• PostCSS

• PurgeCSS

• AutoPrefixer

• PostCSS-Import (because the importer that I think is native to Tailwind doesn't seem to work in this context)

The critical file is /assets/css/postcss.config.js and /assets/css/dev/postcss.config.js

Deployment Notes

Hugo will not rebuild your CSS file unless the file itself is changed. In a TailwindCSS context, most of your work occurs in templates, not in the CSS file. To make development easier, we've created a separate PostCSS config file without PurgeCSS.

• Before deploying, run hugo --gc to generate a minified, purged CSS file.
• Check the resources folder into your repository.

Other Notes

• PurgeCSS will fail if any of your templates are empty.
• If you add themes, you need to add the file location in the PurgeCSS content configuration item.