https://github.com/budparr/hugopipes-tailwindcss

Hugo's Pipes functionality using TailwindCSS and PurgeCSS
https://github.com/budparr/hugopipes-tailwindcss

hugo postcss purgecss tailwindcss

Last synced: 1 day ago
JSON representation

Hugo's Pipes functionality using TailwindCSS and PurgeCSS

• Host: GitHub
• URL: https://github.com/budparr/hugopipes-tailwindcss
• Owner: budparr
• License: mit
• Created: 2018-07-24T03:23:15.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-05-06T17:39:52.000Z (over 4 years ago)
• Last Synced: 2024-08-04T01:11:37.505Z (3 months ago)
• Topics: hugo, postcss, purgecss, tailwindcss
• Language: JavaScript
• Homepage:
• Size: 130 KB
• Stars: 86
• Watchers: 6
• Forks: 12
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-hugo - Hugo's Pipes functionality using TailwindCSS and PurgeCSS

README

        

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

- [Hugo Pipes](https://gohugo.io/hugo-pipes/)

- [TailwindCSS](https://github.com/tailwindcss/tailwindcss) (with a custom extractor for PurgeCSS)

- [PostCSS](https://github.com/postcss/postcss)

- [PurgeCSS](https://github.com/FullHuman/purgecss)

- [AutoPrefixer](https://github.com/postcss/autoprefixer)

- [PostCSS-Import](https://github.com/postcss/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](https://discourse.gohugo.io/t/regenerating-assets-directory-for-hugo-pipes/13175) 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](https://github.com/postcss/postcss-cli#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.