Hugo + Tailwind
So far, I’ve used the combination of Hugo and Tailwind CSS for more than 5 different projects. It’s an extremely versatile zero dependency toolkit that “just works” without the added bulk of unnecessary pre-made components, jQuery and many lines of (mostly) unused code.
In doing so, I’ve started using local template project folders that just needed an
npm install command to be up and running. Turns out that might be useful for others too(dah), so I’ve created a boilerplate repository of this setup today.
So, here’s the rundown.
Trusty old gulp handles Tailwind builds via PostCSS with 2 gulp tasks called
build-css. I’m sticking to gulp as my “swiss army knife”; it’s small, powerful and overall another one of those tools that “just work”, no matter what you throw at them.
Then, there’s 2 npm scripts defined in
package.json that make use of these tasks:
start is meant for local development (and the whole power of Tailwind + autocomplete classes),
deploy will build the site into
hugo --minify), ready for deployment (i.e. drag and drop into Netlify).
This boilerplate also includes purgecss to remove any unused styles from the final stylesheet that gets written to
static/css for deployment. I had to play around with the config a bit to make it work for me though - I’m a bit lazy, so I like using things like this:
transition: all .35s ease-in-out;
In order for this not to get purged (as it’s technically an unused selector), my
purgecss config looks like this:
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || , //save most things that should not be purged
whitelist: [':hover',':focus', 'button', 'button:focus'] //preserve the rest
For testing/troubleshooting etc., un-purged CSS can be built using
gulp dev-css whereas purged CSS comes out of
The Hugo setup is basic at best; should be enough to build upon though. See
layouts/_default/baseof.html to get an idea what the default template looks like.
Here’s the GitHub repository
In order to work with this repository, only 2 things are required:
If that’s set up, then all you need is to get the repository, run
npm install and then
npm run start. Go to
localhost:1313 and you should see a one-page demo site you can start working with in your browser.
PS: the CSS in
./static/css has been purged, so you may want to run
gulp dev-css in order to make all of Tailwind available for your project and/or customize it through
tailwind.config.js (see their docs for details).
If you don’t want to use gulp though, Hugo has PostCSS built in by now - more about that in the Hugo Docs.