Skip to content
Starter files for a Hugo theme with Tailwindcss
Branch: master
Clone or download
Dirk Olbrich
Latest commit a64dd87 Jul 12, 2019

readme.md

Hugo Starter Theme with Tailwindcss

Starter files for a Hugo theme with Tailwindcss.

  • set up to use Tailwindcss - v1.0.5
  • 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

See the Hugo forum discussion "Regenerating assets directory for Hugo Pipes" for the functionality concept.

You can’t perform that action at this time.