Hugo Starter Theme with Tailwindcss

Starter files for a Hugo theme with Tailwindcss.

set up to use Tailwindcss - v1.1.2
use Hugo Pipes to build and load css based on dev or build environment
purge unused css classes with Purgecss for build, but not in dev
works as separate theme repo or as a local theme folder within a Hugo site
basic template setup with an index page, an about page and a posts category
responsive navigation header with minimal javascript to hide the nav on small screens
to keep that s***er down, the theme features a sticky footer

Live long and code.

Prerequisites

Make sure to install postcss-cli and autoprefixer globally in your environment, as Hugo Pipe’s PostCSS requires it. This is mentioned in the Hugo Docs.

npm install -g postcss-cli
npm install -g autoprefixer

Basic usage to develop a separate Theme repo

clone and rename the repo

git clone https://github.com/dirkolbrich/hugo-theme-tailwindcss-starter new-theme-name

to make that theme your own, switch into the newly created folder, remove the git history from this starter repo and initiate a new git repo

cd new-theme-name
rm -rf .git
git init

now install the necessary node packages

npm install

edit the config.toml file in exampleSite/ to reflect the new-theme-name

# in config.toml
theme = "new-theme-name" # your new theme name here

start a server to develop with exampleSite

hugo server -s exampleSite --themesDir=../.. --disableFastRender

Usage direcly within a Hugo repo as a theme package

start a new Hugo site

hugo new site new-site

switch into the theme folder an clone the starter repo

cd new-site/themes
git clone https://github.com/dirkolbrich/hugo-theme-tailwindcss-starter new-theme-name

switch into the newly created theme folder, remove the git history from this starter repo and install the node packages

cd new-theme-name
rm -rf .git
npm install

edit the config.toml file in new-site/ to reflect the new-theme-name

# in config.toml
theme = "new-theme-name" # your new theme name here

switch to the root of the new-site repo and start a server to view the index site

cd new-site
hugo server --disableFastRender

Your content should go into new-site/content, the development of the site layout is done within new-site/themes/new-theme-name/layout.

How does that work anyway

This theme setup uses two separate postcss.config.js files as a configuration used by the Hugo PostCSS Pipe. One for dev and one for build. Based on these config files, postcss builds the styles.css for the site. This snippet is located in /layouts/partials/head.html and is.

{{ if .Site.IsServer }}
    {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/dev/postcss.config.js") }}
    <link rel="stylesheet" href="{{ $style.Permalink }}">
{{ else }}
    {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/postcss.config.js") | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
{{ end }}

The dev config only pulls the tailwind package and uses autoprefixer on it, while the build config also uses purgecss on the resulting tailwind css classes, to keep the file size minimal.

Reference